Home/ Questions/Q 9239647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T08:02:11+00:00

I can’t seem to loop animated gifs with the Google Maps API. It plays

  • 0

I can’t seem to loop animated gifs with the Google Maps API. It plays the animation the first time around but will not play it again after that.

Can anyone point me in the right direction? I have a lot of code in this file so I have dragged out the important bits, I’ll happily put up some more if needed.

var marker = new google.maps.MarkerImage(
    'library/img/gmap_marker.gif',
    new google.maps.Size(100, 100),
    new google.maps.Point(0, 0),
    new google.maps.Point(100, 100)
);

var shadow = new google.maps.MarkerImage(
    'library/img/gmap_shadow.png',
    new google.maps.Size(100, 100),
    new google.maps.Point(0, 0),
    new google.maps.Point(100, 100)
);

// set the personmarker
var person = new google.maps.Marker({
    position: currentPos,
    icon: marker,
    draggable: false,
    raiseOnDrag: false,
    shadow: shadow,
    animation: google.maps.Animation.DROP,
    map: app.map,
    optimized: false
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Key is to set optimized: false, but since you already have and its not working – I tested to create own simple example and it worked.

    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Marker Simple</title>
    <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
    <script>
      function initialize() {
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var mapOptions = {
          zoom: 4,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Hello World!',
            icon: "http://gwtportlets.googlecode.com/svn-history/r46/trunk/src/org/gwtportlets/portlet/public/img/portlet-loading-32x32.gif",
          optimized: false
        });
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas">

    </div>
   </body>
</html>

    Edit it as you please to suit your needs, you can also try to swap using of google.maps.MarkerImage to google.maps.icon because MarkerImage seems to be deprecated see : MarkerImage and Icon.

    Good luck with da code.!

    • 0