google-maps - custom - google maps markers

¿Cómo agregar CSS-Class a un marcador de GoogleMaps?

Question

Quiero animar (fadein, fadeout) un marcador en mi aplicación GoogleMaps (Web).

¿Cómo puedo asignar cualquier clase css a un marcador?

¿O cómo puedo acceder al marcador específico? ¿Tienen selectores como: después o algo?

Si no, ¿cuál es la forma más fácil de aplicarles animaciones?

Answer 1

El DOMNode que contiene la imagen utilizada para el marcador no está disponible a través de la API.

Además, de forma predeterminada, los marcadores no serán DOMNodos individuales, se dibujarán a través de un lienzo.

Pero la imagen de marcador puede ser accesible a través de CSS cuando usa un ícono-URL único para cada marcador.

Muestra (usando jQuery):

<style type="text/css">
img[src^=''http://www.google.com/mapfiles/marker.png?i='']{
  opacity: 0.5
}
</style>
<script  type="text/javascript">
      function initialize() {
        var index=0;
        var mapOptions = {
          zoom: 14,
          center: new google.maps.LatLng(52.5498783, 13.425209099999961),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById(''map_canvas''),
            mapOptions);

        marker=new google.maps.Marker({position:map.getCenter(),
                 map:map,optimized:false,
                 icon:''http://www.google.com/mapfiles/marker.png?i=''+(index++)});

        google.maps.event.addListener(marker,''mouseover'',function(){
          $(''img[src="''+this.icon+''"]'').stop().animate({opacity:1});
        });

        google.maps.event.addListener(marker,''mouseout'',function(){
          $(''img[src="''+this.icon+''"]'').stop().animate({opacity:.5});
        });
      }

      google.maps.event.addDomListener(window, ''load'', initialize);

</script> 

¿Cómo funciona?

La muestra utiliza una sola imagen como icono de marcador ( http://www.google.com/mapfiles/marker.png )

A través de CSS aplicamos una opacidad. Puede observar que hay un parámetro i dentro de la URL. Este parámetro se utilizará para que el img-src sea único.

Utilizo una variable que se incrementará para obtener un img-src único:

var index=0;

//a few lines later:
icon:''http://www.google.com/mapfiles/marker.png?i=''+(index++)

Ahora podrá seleccionar el elemento <img/> utilizado para el marcador, por ejemplo, onmouseover / onmouseout a través de un selector de atributos.

Cuando no quiera usar javascript de vainilla, puede usar document.querySelector para acceder a la imagen.

Nota: debe establecer la opción optimized del marcador en false (esto obligará a la API a representar el marcador como un elemento único)
Demostración: http://jsfiddle.net/doktormolle/nBsh4/

Answer 2

Hay un truco que puede funcionar si, por ejemplo, desea cambiar el cursor para el marcador Agregue esto:

google.maps.event.addListener(YOURMARKER,''mouseover'',function(){$(".gm-style   div").addClass("markerClass")});                        
google.maps.event.addListener(YOURMARKER,''mouseout'',function(){$(".gm-style div").removeClass("markerClass")});                        

y

#YOUR-CANVAS .gm-style div {cursor: default !important;}
#YOUR-CANVAS .gm-style div.markerClass{cursor:pointer !important}

Funciona de maravilla