google-maps - custom - google maps markers
¿Cómo agregar CSS-Class a un marcador de GoogleMaps? (2)
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/
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?
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