API di Google Maps v3: come faccio a modificare dinamicamente l'icona dell'indicatore?

Utilizzando l'API di Google Maps v3, come faccio a modificare a livello di programmazione l'icona dell'indicatore?

Quello che vorrei fare è, quando qualcuno passa il mouse su un collegamento, fare in modo che l'icona dell'indicatore corrispondente sulla mappa cambi colore per indicare l'indicatore in questione.

Essenzialmente, la stessa funzione di ciò che fa Roost.

Quando passi il mouse su un elenco di case a sinistra, l'indicatore corrispondente a destra cambia colore

Chiama il marker.setIcon('newImage.png')... Cerca qui i documenti.

Stai chiedendo il modo effettivo di farlo? Si potrebbe semplicemente creare ogni div, e un componente aggiuntivo mouseovere mouseoutascoltatore che avrebbe cambiato l'icona e ritorno per i marcatori.

Puoi anche utilizzare un cerchio come icona indicatore, ad esempio:

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

e poi, se vuoi cambiare il marker dinamicamente (come al passaggio del mouse), puoi, ad esempio:

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

Questo thread potrebbe essere morto, ma StyledMarker è disponibile per API v3. Associa semplicemente il cambio di colore che desideri all'evento DOM corretto utilizzando il metodo addDomListener () . Questo esempio è abbastanza vicino a quello che vuoi fare. Se guardi l'origine della pagina, cambia:

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

a qualcosa come:

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

Dovrebbe essere sufficiente per farti andare avanti.

La pagina Wikipedia sugli eventi DOM ti aiuterà anche a indirizzare l'evento che desideri acquisire sul lato client.

Buona fortuna (se ne hai ancora bisogno)

La libreria delle utility GMaps ha un plugin chiamato MapIconMaker che semplifica la generazione al volo di diversi stili di marker. Utilizza Google Charts per disegnare i marcatori.

C'è una buona demo qui che mostra che tipo di marker puoi creare con esso.

Puoi provare questo codice

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