Change Google Map marker symbol color on click

Question

I am using custom SVG symbols for my map markers ala: https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom

I can't seem to find any documentation on how to change any of these SVG options to create an 'activated' marker when clicked. I would like to change the color or scale of the custom symbol.

The closest example I could find was:

marker.setIcon("_URL-GOES-HERE_");

But, that is specific to a custom icon image—not a custom symbol. Is this possible?

Answer 1

You can change the color on click by creating a version of the icon with the new color when the icon is clicked:

marker.addListener('click', changeColor);

function changeColor(evt) {
  this.setIcon(pinSymbol('blue'));
}

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
    };
}

proof of concept fiddle

code snippet:

 var markers = []; function initialize() { var latlng = new google.maps.LatLng(47.605, -122.333); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = createMarker(latlng, 'red', map); var marker1 = createMarker(new google.maps.LatLng(47.5, -122.0), 'green', map); var marker2 = createMarker(new google.maps.LatLng(47.6, -122.2), 'orange', map); var marker3 = createMarker(new google.maps.LatLng(47.7, -122.1), 'yellow', map); } function createMarker(position, color, map) { var marker = new google.maps.Marker({ map: map, position: position, icon: pinSymbol(color), originalColor: color }); marker.addListener('click', changeColor); markers.push(marker); return marker; } function changeColor(evt) { restoreColors(); this.setIcon(pinSymbol('blue')); } function pinSymbol(color) { return { path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', fillColor: color, fillOpacity: 1, strokeColor: '#000', strokeWeight: 2, scale: 1 }; } function restoreColors() { for (var i = 0; i < markers.length; i++) { markers[i].setIcon(pinSymbol(markers[i].originalColor)); } } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div>