Google Maps API v3: Wie ändere ich das Markierungssymbol dynamisch?

105

Wie ändere ich mithilfe der Google Maps API v3 das Markierungssymbol programmgesteuert?

Was ich tun möchte, ist, wenn jemand über einen Link schwebt - damit das entsprechende Markierungssymbol auf der Karte die Farben ändert, um die betreffende Markierung zu kennzeichnen.

Im Wesentlichen die gleiche Funktion wie bei Roost.

Wenn Sie mit der Maus über eine Home-Liste auf der linken Seite fahren, ändert die entsprechende Markierung auf der rechten Seite die Farbe

TedK
quelle
Ihr Live-Beispiel ist gesunken. Ich wollte dich nur wissen lassen. Ich nehme an, es ist ähnlich wie bei airbnb.com?
FujiRoyale

Antworten:

181

Rufen Sie die marker.setIcon('newImage.png')... Suchen Sie hier nach den Dokumenten.

Fragen Sie nach dem tatsächlichen Weg, dies zu tun? Sie könnten nur jeden erstellen div, und ein Add a mouseoverund mouseoutHörer , die das Symbol und zurück für die Markierungen ändern würden.

Sudhir Jonathan
quelle
6
das half mir herauszufinden, wie man die Animation eines Markers ändert:markersArray[0].setAnimation(google.maps.Animation.BOUNCE);
Ray
19

Sie können auch einen Kreis als Markierungssymbol verwenden, zum Beispiel:

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

Wenn Sie den Marker dann dynamisch ändern möchten (wie beim Mouseover), können Sie beispielsweise Folgendes tun:

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

Dieser Thread ist möglicherweise tot, aber StyledMarker ist für API v3 verfügbar. Binden Sie einfach die gewünschte Farbänderung mit der Methode addDomListener () an das richtige DOM-Ereignis . Dieses Beispiel kommt dem, was Sie tun möchten, ziemlich nahe. Wenn Sie sich die Seitenquelle ansehen, ändern Sie:

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

zu so etwas wie:

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

Das sollte ausreichen, um Sie in Bewegung zu bringen.

Auf der Wikipedia-Seite zu DOM-Ereignissen können Sie auch das Ereignis auswählen, das Sie auf der Clientseite erfassen möchten.

Viel Glück (wenn Sie es noch brauchen)

tatlar
quelle
Ja, aber das Ändern des Kartenzeigers erfolgt durch Ändern der Cursoreigenschaft in CSS, nicht in der Karten-API - siehe Dokumentation
tatlar
5

Die GMaps Utility Library verfügt über ein Plugin namens MapIconMaker , mit dem Sie problemlos verschiedene Markierungsstile im generieren können. Es verwendet Google Charts, um die Markierungen zu zeichnen.

Hier gibt es eine gute Demo , die zeigt, welche Art von Markern Sie damit machen können.

Chris B.
quelle
3
MapIconMaker ist nicht verfügbar für Maps API v3
benjisail
StyledMarker für API v3 ist jedoch. HTH.
Tatlar
1
Leider wurde die Google Charts API kürzlich von Google offiziell abgelehnt :(
Danny C
4

Sie können diesen Code ausprobieren

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