Changer la couleur de symbole marqueur Google Map sur un clic

Question

J'utilise des symboles SVG personnalisés pour mes marqueurs de carte ala: https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom

Je ne peux pas sembler trouver de la documentation sur la façon de modifier ces options SVG pour créer un " activé 'marqueur lorsque cliqué. Je voudrais changer la couleur ou l'échelle du symbole personnalisé.

Le plus proche exemple, je pouvais trouver était:

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

Mais, qui est spécifique à une icône personnalisée image pas un symbole personnalisé. Est-ce possible?

Answer 1

Vous pouvez changer la couleur de clic en créant une version de l'icône avec la nouvelle couleur lorsque l'icône est cliqué:

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

extrait de code:

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>