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

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

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.

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

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)

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.

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>