web-dev-qa-db-fra.com

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

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

Ce que je voudrais faire, c’est que 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 maisons à gauche, le marqueur correspondant à droite change de couleur

javascriptgoogle-mapsgoogle-maps-api-3
104
TedK

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

Demandez-vous sur la façon réelle de le faire? Vous pouvez simplement créer chaque div et ajouter un écouteur mouseover et mouseout qui modifierait l'icône et inverserait les marqueurs.

173
Sudhir Jonathan

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 voulez changer le marqueur dynamiquement (comme au passage de la souris), vous pouvez par exemple:

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

Ce fil peut être mort, mais StyledMarker est disponible pour API v3. Liez simplement le changement de couleur souhaité au bon événement DOM à l'aide de la méthode addDomListener () . Cet exemple est assez proche de ce que vous voulez faire. Si vous regardez la source de la page, changez:

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 Evénements DOM vous aidera également à cibler l'événement que vous souhaitez capturer côté client.

Bonne chance (si vous en avez encore besoin)

8
tatlar

GMaps Utility Library possède un plugin appelé MapIconMaker qui permet de générer facilement différents styles de marqueur à la volée. Il utilise Google Charts pour dessiner les marqueurs.

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

5
Chris B

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>
4
Md. Noor-A-Alam Siddique