开发者

Custom Google Maps Icon Using Sprite

I've found custom Google Maps icon images that can be laid out as a sprite (matrix of small pics). I effectively want to create custom icons which are numbered 1-10 (for my 10 results per page) and also have mouseover effects (change color).

I'm not sure how to do this. The relevant code is the following:

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

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

    marker[index]=n开发者_StackOverflowew google.maps.Marker({
                        position:latlng[index],
                        map:map,
                        icon:image_url
                    });

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

Even if I can't make it a sprite (which seems unlikely right now) I'd like to change the icon on mouseover.

I've tried to do so and created a hack that SORT of works. The problem here is that the map flickers occassionally when reset. Is there a better way?

          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);      
        });


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
  });
}
​

This code might help you to get an idea about placing custom markers.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜