/* animated markers gmaps api */

Demo: jsfiddle

Versión en español

In our last project here at work we need to make some animated markers in google maps. We try with animated gif's but the quality was so poor, then we chose png sequence. With the help of my coworkers Pablo Mercado (fantastic animator and illustrator), Alan (Redo) Rodriguez (fantastic illustrator and designer) and my js sensei @carlosck. Here is how we done it.

HTML

the basic html for run gmaps

  <head>
    <title>Simple Map</title>

    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

  </head>
  <body>
    <div id="map-canvas"></div>
  </body>

JAVASCRIPT

Then the javascript... first declaring the vars that will contain the arrays of the markers.

//this is the array of the counter of every image of each marker
var currentSprite = [];

//the array of markers that will populate in the loop later
var markers=[];

//the setInterval var
var animateController = null;

//the var that will contain the maps api
var map;

the assets for the animation of the markers and the geolocalization

//with the geolocalization of every marker and their respective assets
var spritesMapa = [
    [
        [21.343701780399353, -99.95539101562497],
        ["img/map/ani/pino2/pino20000.png", "img/map/ani/pino2/pino20001.png", "img/map/ani/pino2/pino20002.png"]
    ],
    [
        [22.32272124164274, -100.69147499999997],
        ["img/map/ani/pino/pino0000.png", "img/map/ani/pino/pino0001.png", "img/map/ani/pino/pino0002.png"]
    ]
];

the function that will loop trough the assets of every marker one time (later we will make it repeat indefinitely)

//for generate every counter of each marker
function nextFramemarker() {
  var actual, i, _i, _len, _results;
  _results = [];
  for (_i = 0, _len = markers.length; _i < _len; _i++) {
    i = markers[_i];

    actual = 0;
    actual = currentSprite[_i];
    actual++;

    if (actual >= spritesMapa[_i][1].length) {
      actual = 0;
    }
    currentSprite[_i] = actual;

    _results.push(i.setIcon(spritesMapa[_i][1][actual]));
  }
  return _results;
}

next the google maps initlialize function

//simple gmaps api init
function initialize() {
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(22.932893686661505, -108.06403359374997),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    markers=[];

}

//init here
initialize();

inside the initialize function we will run the loop that populates the markers in the map with this cycle

//inside the gmaps init function we will generate all the markers with the first frame of the animation
  for (_i = 0, _len = spritesMapa.length; _i < _len; _i++) {
    m = spritesMapa[_i];
    markers[_i] = new google.maps.Marker({
      position: new google.maps.LatLng(m[0][0], m[0][1]),
      map: map,
      id: "marker" + _i,
      icon: m[1][0],
      optimized: false
    });
    google.maps.event.addListener(markers[_i], "click", function(event) {});
    currentSprite[_i] = 0;
  }

and finally the infinite loop of the images for the animation of the marker (thanks to @carlosck for the explanation for this loop)

//this will loop trough all the frames of every marker
animateController = setInterval(function() {
         nextFramemarker();
      }, 125);
Posted by @gamanox

Please help me with a click in the ad!

comments powered by Disqus