javascript - multiple - google.maps.marker example

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

Question

Usando Google Maps API v3, ¿cómo cambio programáticamente el icono del marcador?

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

Esencialmente, la misma función que Roost.

Cuando pasa el puntero sobre una lista de viviendas a la izquierda, el marcador correspondiente a la derecha cambia de color

Answer 1

Este hilo puede estar muerto, pero StyledMarker está disponible para API v3. Simplemente enlace el cambio de color que desee al evento DOM correcto utilizando el método addDomListener () . Este example es bastante parecido a lo que quieres hacer. Si miras el origen de la página, cambia:

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 te muevas.

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

Buena suerte (si aún lo necesitas)

Answer 2

La Biblioteca de utilidad de GMaps tiene un complemento llamado MapIconMaker que hace que sea fácil generar diferentes estilos de marcadores sobre la marcha. Utiliza Google Charts para dibujar los marcadores.

Aquí hay una buena demostración que muestra qué tipo de marcadores puedes hacer con ella.

Answer 3

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>

Answer 4

También puede usar un círculo como un 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 ratón), puede, por ejemplo:

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

Answer 5

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

¿Estás preguntando sobre la forma real de hacerlo? Podrías simplemente crear cada div y agregar un detector de mouseover y mouseout que cambiaría el ícono y volvería a los marcadores.