Как добавить CSS-класс в маркер GoogleMaps?

Я хочу анимировать (fadein, fadeout) маркер в приложении GoogleMaps (Web).

Как я могу присвоить какой-либо класс css маркеру?

Или как я могу получить доступ к определенному маркеру? Есть ли у них такие селекторы, как: после или что-то еще?

Если нет, то какой самый простой способ применить к ним анимацию?

Ответ 1

DOMNode, который содержит изображение, используемое для маркера, недоступен через API.

Кроме того, по умолчанию маркеры не будут одиночными DOMNodes, они будут нарисованы через холст.

Но маркер-изображение может быть доступно через CSS, когда вы используете уникальный URL-адрес значка для каждого маркера.

Пример (с использованием 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>

Как работает ist:

В примере используется одно изображение в виде значка Marker (http://www.google.com/mapfiles/marker.png)

через CSS мы применяем непрозрачность. Вы можете заметить, что внутри URL-адреса есть i-параметр. Этот параметр будет использоваться для уникального img-src.

Я использую переменную, которая будет увеличиваться, чтобы получить уникальный img-src:

var index=0;

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

Теперь вы сможете выбрать элемент <img/>, используемый для маркера, например. onmouseover/onmouseout через селектор атрибутов.

Если вы не используете javascript для ванилин, вы можете использовать document.querySelector для доступа к изображению.

Примечание. вы должны установить optimized -ограничение маркера на false (это заставит API отображать маркер как один элемент)
Демо: http://jsfiddle.net/doktormolle/nBsh4/

Ответ 2

Есть трюк, который может работать, если вы, например, хотите изменить курсор для маркера Добавьте это:

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

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

работает как шарм