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

105

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

TedK
fuente
Tu ejemplo en vivo ha bajado. Sólo quería hacerte saber. Supongo que es similar a lo que sucede en airbnb.com.
FujiRoyale

Respuestas:

181

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.

Sudhir Jonathan
fuente
6
que me ayudó a descubrir cómo cambiar la animación de un marcador:markersArray[0].setAnimation(google.maps.Animation.BOUNCE);
Rayo
19

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
        })
romano
fuente
8

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)

tatlar
fuente
Sí, pero el cambio del puntero de los mapas se hace cambiando la propiedad del cursor en CSS, no en la API de Maps - ver la documentación
tatlar
Esta pregunta y respuestas de StackOverflow pueden guiarlo aún más.
tatlar
5

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.

Chris B
fuente
3
MapIconMaker no está disponible para Maps API v3
benjisail
Sin embargo, StyledMarker para API v3. HTH.
tatlar
1
Desafortunadamente, Google Charts API ha sido oficialmente obsoleta recientemente por Google :(
Danny C
4

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