Wie füge ich eine CSS-Klasse zu einer Google Maps-Markierung hinzu?

Der DOMNode, der das für die Markierung verwendete Image enthält, ist nicht über die API verfügbar.

Darüber hinaus sind die Markierungen standardmäßig nicht als einzelne DOMNodes definiert, sondern werden über die Leinwand gezeichnet.

Auf das Marker-Image kann jedoch über CSS zugegriffen werden, wenn Sie für jeden Marker eine eindeutige Symbol-URL verwenden.

Beispiel (mit 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> 

Wie funktioniert es:

Das Beispiel verwendet ein einzelnes Bild als Marker-Symbol ( http://www.google.com/mapfiles/marker.png ).

via CSS wenden wir eine Deckkraft an. Möglicherweise stellen Sie fest, dass die URL einen i-Parameter enthält. Dieser Parameter wird verwendet, um das img-src eindeutig zu machen.

Ich verwende eine Variable, die inkrementiert wird, um ein eindeutiges img-src zu erhalten:

var index=0;

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

Jetzt können Sie das <img/>- Element auswählen, das für die Markierung verwendet wird, z. onmouseover/onmouseout über einen Attributselektor.

Wenn Sie Vanilla-Javascript verwenden möchten, können Sie document.querySelector verwenden, um auf das Bild zuzugreifen.

Hinweis: Sie müssen die Option optimized- der Markierung auf false setzen (dies zwingt die API, die Markierung als einzelnes Element darzustellen)
Demo:http://jsfiddle.net/doktormolle/nBsh4/