how to set new color for legacy google map marker

Question

I'm using a legacy version of google maps.

I set up my markers like this, using Json data to fill in the variables:

var marker = createMarker(marker_id, point, course_name, phone, holes, ninefee, eightteenfee, ninefee_weekend, eightteenfee_weekend, ninefee_cart, eightteenfee_cart, teetimes, notes, map);

function createMarker(marker_id, point, course_name, phone, holes, ninefee, eightteenfee, ninefee_weekend, eightteenfee_weekend, ninefee_cart, eightteenfee_cart, teetimes, notes, map) {
        var marker = new google.maps.Marker({
          id: marker_id,
          position: point,
          map: map,
          icon: {
            path: "M128 0L416 128 175.5 234.9c.4 1.6 .5 3.3 .5 5.1v84.8c25.2-3.1 52.1-4.8 80-4.8c141.4 0 256 43 256 96s-114.6 96-256 96S0 469 0 416c0-35.5 51.5-66.6 128-83.2V256 240 0zm96 448c35.3 0 64-14.3 64-32s-28.7-32-64-32s-64 14.3-64 32s28.7 32 64 32z",
            scale: 0.05,
            strokeWeight: 0.2,
            strokeColor: '#000000',
            strokeOpacity: 1,
            fillColor: '#08755F',
            fillOpacity: 1
          }
        });

Now I'd like to reset the color on mouseover, but it isn't working:

google.maps.event.addListener(marker, "mouseover", function() {
    marker.set("fillColor","#000000"); //nothing happens
});

I don't get any errors, but nothing happens. How do I set the color of the marker?

Answer 1

The fillColor belongs to the icon. Get the icon from the marker with marker.getIcon() change it then set it back on the marker:

google.maps.event.addListener(marker, "mouseover", function() {
    var icon = marker.getIcon(); // get icon
    icon.fillColor="#000000";    // change its color
    marker.setIcon(icon);        // set it back on the marker
});
google.maps.event.addListener(marker, "mouseout", function() {
    var icon = marker.getIcon();
    icon.fillColor="#08755F";
    marker.setIcon(icon);
});

proof of concept fiddle

working code snippet:

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: -33.9, lng: 151.2 },
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map) {
  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];
var marker = createMarker(i, { lat: beach[1], lng: beach[2] }, "name", "phone", "holes", "ninefee", "eightteenfee", "ninefee_weekend", "eightteenfee_weekend", "ninefee_cart", "eightteenfee_cart", "teetimes", "notes", map);
  }
}

function createMarker(marker_id, point, course_name, phone, holes, ninefee, eightteenfee, ninefee_weekend, eightteenfee_weekend, ninefee_cart, eightteenfee_cart, teetimes, notes, map) {
        var marker = new google.maps.Marker({
          id: marker_id,
          position: point,
          map: map,
          icon: {
            path: "M128 0L416 128 175.5 234.9c.4 1.6 .5 3.3 .5 5.1v84.8c25.2-3.1 52.1-4.8 80-4.8c141.4 0 256 43 256 96s-114.6 96-256 96S0 469 0 416c0-35.5 51.5-66.6 128-83.2V256 240 0zm96 448c35.3 0 64-14.3 64-32s-28.7-32-64-32s-64 14.3-64 32s28.7 32 64 32z",
            scale: 0.05,
            strokeWeight: 0.2,
            strokeColor: '#000000',
            strokeOpacity: 1,
            fillColor: '#08755F',
            fillOpacity: 1
          }
        });
google.maps.event.addListener(marker, "mouseover", function() {
    var icon = marker.getIcon(); //nothing happens
    console.log(icon.fillColor)
    icon.fillColor="#000000";
    marker.setIcon(icon);
});
google.maps.event.addListener(marker, "mouseout", function() {
    var icon = marker.getIcon(); //nothing happens
    console.log(icon.fillColor)
    icon.fillColor="#08755F";
    marker.setIcon(icon);
});

}
window.initMap = initMap;

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!doctype html>
<html>
  <head>
    <title>Complex Marker Icons</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>