Ändern Sie auf Klick Symbolfarbe Google Map Marker

Question

ich für meine Kartenmarkierungen individuelle SVG Symbole verwende ala: https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom

Ich kann nicht auf alle Unterlagen zu finden scheinen, wie jeder dieser SVG-Optionen ändern ein "zu schaffen aktiviert 'marker beim Anklicken. Ich möchte die Farbe oder den Maßstab des benutzerdefinierten Symbols ändern.

Das nächste Beispiel, das ich finden konnte, war:

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

Aber das ist spezifisch für ein benutzerdefiniertes Symbol bild nicht ein eigenes Symbol. Ist das möglich?

Answer 1

Sie die Farbe auf Klick ändern können eine Version des Symbols mit der neuen Farbe, indem, wenn das Symbol geklickt wird:

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-Schnipsel:

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>