API Google Maps v3: comment modifier dynamiquement l'icône de marqueur?

À l'aide de l'API Google Maps v3, comment modifier l'icône de marqueur par programmation?

Ce que je voudrais faire, c'est, lorsque quelqu'un survole un lien - que l'icône du marqueur correspondant sur la carte change de couleur pour indiquer le marqueur en question.

Essentiellement, la même fonction que ce que fait Roost.

Lorsque vous survolez une liste de maison à gauche, le marqueur correspondant à droite change de couleur

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

Vous demandez-vous comment procéder? Vous pouvez simplement créer chacun div, et ajouter un mouseoveret un mouseoutauditeur qui changerait l'icône et inversement 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
    },
});

puis, si vous souhaitez changer le marqueur de manière dynamique (comme au survol 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 est peut-être mort, mais StyledMarker est disponible pour l'API v3. Liez simplement le changement de couleur souhaité à l'événement DOM correct en utilisant la méthode addDomListener () . Cet exemple est assez 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 Wikipédia sur les événements DOM vous aidera également à cibler l'événement que vous souhaitez capturer côté client.

Bonne chance (si vous en avez encore besoin)

La bibliothèque d'utilitaires GMaps a un plugin appelé MapIconMaker qui facilite la génération de 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 genre de marqueurs vous pouvez faire avec.

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>