CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
olimits7
olimits7

Reputation: 593

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?

Upvotes: 4

Views: 13472

Answers (2)

The Alpha
The Alpha

Reputation: 146191

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.

Upvotes: 8

user2424370
user2424370

Reputation:

I assumed you can do this:

function showMarkerFeature(p) {
var oF = new google.maps.Marker({
    map: map,
    position: p,
    //set the image src path here
    icon: "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png" 
});
identifyMarker.setVisible(false);
map.setCenter(p);

return oF;
}

Upvotes: 0

Related Questions