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


105

À 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


Votre exemple en direct a diminué. Je voulais juste vous faire savoir. Je suppose que c'est similaire à ce qui se passe sur airbnb.com?
FujiRoyale

Réponses:


181

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.


6
cela m'a aidé à comprendre comment changer l'animation d'un marqueur:markersArray[0].setAnimation(google.maps.Animation.BOUNCE);
Ray

19

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
        })

8

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)


Oui, mais changer le pointeur de cartes se fait en changeant la propriété du curseur dans CSS, pas dans l'API Maps - voir la documentation
tatlar

Cette question et réponses StackOverflow peuvent vous guider davantage.
tatlar

5

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.


3
MapIconMaker n'est pas disponible pour les cartes API v3
benjisail

StyledMarker pour l'API v3 est cependant. HTH.
tatlar

1
Malheureusement, l'API Google Charts a récemment été officiellement abandonnée par Google :(
Danny C

4

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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.