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

Question

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

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

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

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

Answer 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 работает:

образца использует одно изображение в качестве маркера-Icon (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 для работы с willa. document.querySelector.

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

Answer 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} 

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