API de Google Maps v3: ¿Cómo cambio dinámicamente el icono del marcador?

Con la API de Google Maps v3, ¿cómo cambio mediante programación el icono del marcador?

Lo que me gustaría hacer es que, cuando alguien pase el mouse sobre un enlace, que el icono de marcador correspondiente en el mapa cambie de color para indicar el marcador en cuestión.

Esencialmente, la misma función que hace Roost.

Cuando pasa el cursor sobre un anuncio de inicio a la izquierda, el marcador correspondiente a la derecha cambia de color

Llame al marker.setIcon('newImage.png')... Busque aquí los documentos.

¿Está preguntando sobre la forma real de hacerlo? Podría simplemente crear cada uno divy agregar un mouseovery un mouseoutoyente que cambiaría el ícono y volvería a los marcadores.

También puede utilizar un círculo como icono de marcador, por ejemplo:

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

y luego, si desea cambiar el marcador dinámicamente (como al pasar el mouse), puede, por ejemplo:

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

Este hilo puede estar muerto, pero StyledMarker está disponible para API v3. Simplemente vincule el cambio de color que desea al evento DOM correcto usando el método addDomListener () . Este ejemplo se acerca bastante a lo que quiere hacer. Si observa la fuente de la página, cambie:

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

a algo como:

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

Eso debería ser suficiente para que sigas adelante.

La página de Wikipedia sobre eventos DOM también lo ayudará a identificar el evento que desea capturar en el lado del cliente.

Buena suerte (si aún la necesitas)

La biblioteca de utilidades de GMaps tiene un complemento llamado MapIconMaker que facilita la generación de diferentes estilos de marcadores sobre la marcha. Utiliza Google Charts para dibujar los marcadores.

Hay una buena demostración aquí que muestra qué tipo de marcadores se pueden hacer con ella.

Puedes probar este código

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