API Google Maps v3: Comment puis-je modifier dynamiquement l'icône du marqueur?

Appelez le marker.setIcon('newImage.png') … Regardez ici les documents.

Demandez-vous la manière réelle de le faire? Vous pouvez simplement créer chaque div , et ajouter un écouteur de mouseover et de mouseover qui changerait l'icône et revenir pour les marqueurs.

Vous pouvez également utiliser un cercle comme icône de marqueur, par exemple:

 var oMarker = new google.maps.Marker({ position: latLng, sName: "Marker Name", map: map, icon: { path: google.maps.SymbolPath.CIRCLE, scale: 8.5, fillColor: "#F00", fillOpacity: 0.4, strokeWeight: 0.4 }, }); 

Et ensuite, si vous souhaitez modifier dynamiquement le marqueur (comme sur le passage de la souris), vous pouvez, par exemple:

 oMarker.setIcon({ path: google.maps.SymbolPath.CIRCLE, scale: 10, fillColor: "#00F", fillOpacity: 0.8, strokeWeight: 1 }) 

Ce thread peut être mort, mais StyledMarker est disponible pour l'API v3. Il suffit de lier le changement de couleur souhaité à l'événement DOM approprié en utilisant la méthode addDomListener () . Cet exemple est très proche de ce que vous voulez faire. Si vous regardez la source de la page, modifiez:

 google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() { styleIcon.set("color","#00ff00"); styleIcon.set("text","Go"); }); 

À quelque chose comme:

 google.maps.event.addDomListener("mouseover",function() { styleIcon.set("color","#00ff00"); styleIcon.set("text","Go"); }); 

Cela devrait suffire à vous faire avancer.

La page Wikipedia sur les événements DOM vous aidera également à cibler l'événement que vous souhaitez capturer sur le côté client.

Bonne chance (si vous en avez encore besoin)

La bibliothèque d'utilitaires GMaps possède un plugin appelé MapIconMaker qui permet de générer facilement différents styles de marqueurs à la volée. Il utilise Google Charts pour dessiner les marqueurs.

Il y a une bonne démo ici qui montre quel type de marqueurs vous pouvez faire avec elle.

Vous pouvez essayer ce code

  <script src="http://maps.googleapis.com/maps/api/js"></script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> <script> function initialize() { var map; var bounds = new google.maps.LatLngBounds(); var mapOptions = { zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions); var markers = [ ['title-1', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.120850, '<p> Hello - 1 </p>'], ['title-2', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.420850, '<p> Hello - 2 </p>'], ['title-3', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.720850, '<p> Hello - 3 </p>'], ['title-4', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.020850, '<p> Hello - 4 </p>'], ['title-5', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.320850, '<p> Hello - 5 </p>'] ]; var infoWindow = new google.maps.InfoWindow(), marker, i; var testMarker = []; var status = []; for( i = 0; i < markers.length; i++ ) { var title = markers[i][0]; var loan = markers[i][1]; var lat = markers[i][2]; var long = markers[i][3]; var add = markers[i][4]; var iconGreen = 'img/greenMarker.png'; //green marker var iconRed = 'img/redMarker.png'; //red marker var infoWindowContent = loan + "\n" + placeId + add; var position = new google.maps.LatLng(lat, long); bounds.extend(position); marker = new google.maps.Marker({ map: map, title: title, position: position, icon: iconGreen }); testMarker[i] = marker; status[i] = 1; google.maps.event.addListener(marker, 'click', ( function toggleBounce( i,status,testMarker) { return function() { infoWindow.setContent(markers[i][1]+markers[i][4]); if( status[i] === 1 ) { testMarker[i].setIcon(iconRed); status[i] = 0; } for( var k = 0; k < markers.length ; k++ ) { if(k != i) { testMarker[k].setIcon(iconGreen); status[i] = 1; } } infoWindow.open(map, testMarker[i]); } })( i,status,testMarker)); map.fitBounds(bounds); } var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { this.setZoom(8); google.maps.event.removeListener(boundsListener); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="mapDiv" style="width:820px; height:300px"></div>