Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use my own custom animated gifs as markers on Google Maps API?

I want to use different animated cartoon images (gifs) as markers on Google Maps; can I do this with the API?

like image 587
olimits7 Avatar asked Feb 13 '23 03:02

olimits7


1 Answers

Yes you can Live Example):

var position = new google.maps.LatLng(59.219521,15.1419873);
var marker;
var map;

function initialize() {
    var mapOptions = {
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: position
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    marker = new google.maps.Marker({
        map:map,
        draggable:false,
        animation: google.maps.Animation.DROP,
        position: position,
        icon: "http://heera.it/wp-content/themes/heerait/img/blog/me.png"
    });
}

You just need to use icon:icon-url when creating the marker.

Update:

marker = new google.maps.Marker({
  map:map,
  draggable:false,
  optimized:false, // <-- required for animated gif
  animation: google.maps.Animation.DROP,
  position: position,
  icon: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif"
});

Example Here.

like image 130
The Alpha Avatar answered Apr 29 '23 01:04

The Alpha