Пользовательский значок Google Maps с использованием Sprite

Question

Я нашел пользовательские изображения значков Карт Google, которые можно выложить в виде спрайта (матрица небольших изображений).Я хочу создать собственные значки с номерами от 1 до 10 (для моих 10 результатов на странице), а также с эффектами наведения мыши (изменить цвет).

Я не уверен, как это сделать.Соответствующий код выглядит следующим образом:

$('.entries').each(function(index){
    var entry=$(this);

    latlng[index]=new google.maps.LatLng($(this).attr('data-lat'),$(this).attr('data-lng'));

    marker[index]=new google.maps.Marker({
                        position:latlng[index],
                        map:map,
                        icon:image_url
                    });

    if(marker[index]){
        marker[index].setMap(map);
    }   

Даже если я не могу сделать его спрайтом (что сейчас кажется маловероятным), я бы хотел изменить значок при наведении курсора мыши.

Я пытался сделать это и создал взломать что-то вроде работ.Проблема здесь в том, что при сбросе карта иногда мигает.Есть ли лучший способ?

          google.maps.event.addListener(marker[index],'mouseover', function(){
            entry.addClass('map-hover');
        //  alert(marker[index].icon);
            marker[index].icon='{{site}}media/map-icons/iconb'+(index+1)+'.png'
            marker[index].setMap(map);

        });

        google.maps.event.addListener(marker[index],'mouseout', function(){
            entry.removeClass('map-hover');
            marker[index].icon='{{site}}media/map-icons/iconr'+(index+1)+'.png'
            marker[index].setMap(map);      
        });

Answer 1

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var latLng = new google.maps.LatLng(37.4419, -122.1419);
  var map = new google.maps.Map(mapDiv, {
    center: latLng,
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
  var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
  var beachMarker = new google.maps.Marker({
    position: latLng,
    map: map,
    icon: image
  });
}
​

Этот код может помочь вам получить представление о размещении пользовательских маркеров.