Creating Animated Google Maps Markers with CSS and JavaScript

one, Introduction

The Google Maps API allows web developers to create an exceptional user experience with just a few lines of code through its amazing built-in functionality. However, it also has one significant shortcoming - a lack of flexibility and creativity in map markers.

Sure, you can add custom marker images, tooltips, and corresponding labels, but all of these are static and interactive in a text-oriented way. In addition, there is no standard way to create interactive markers that respond to user actions.

I simply couldn't stop there, so I set out to find a way to create a truly unique mapping.

This article is about showing you a truly unique way to create a marker map. Specifically, I'm going to show you how to use CSS3 animation techniques to create a marker map. With this technique, you can make the marker dance, wiggle, and hide until it jumps off the screen in an elegant way.

If the user hovers over the marker, clicks it, or uses a toggle outside the map, you will be able to use any CSS animation to "revive" it. This article will introduce you to a simple strategy that you can use to animate markers in any of your projects. For your reference, two other examples - Ryan Connolly (http://jsfiddle.net/ryanoc/86Ejf/) and Felipe Figueroa (http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254) both use a similar approach to this.

2. Basic knowledge

You only need to follow the steps below to add CSS animation support to the markers on your map.

1. First Step

Add an image to your marker. Here is how you specify the image in code:

 var catIcon = { 
 
 url: myImageURLhere, 
 
    //state your size parameters in terms of pixels 
 
 size : new google.maps.Size( 70 , 60 ), 
 
    scaledSize: new google.maps.Size( 70 , 60 ), 
 
    origin: new google.maps.Point( 0,0 ) 
 
 }

(II) Step 2

Set the parameter optimized to false in your tag declaration. This will allow you to render each tag as a separate DOM element:

 var marker = new google.maps.Marker({ 
 
 position :latLng, 
 
 map: map, 
 
    // set the icon as catIcon declared above   
 
 icon: catIcon, 
 
    // must use optimized false for CSS 
 
 optimized: false 
 
 });

(III) Step 3

Create an overlayView object, which is responsible for organizing all the markers into a panel, and then you can access this overlayView object from the DOM. Please refer to the following code:

 var myoverlay = new google.maps.OverlayView(); 
 
    myoverlay.draw = function () { 
 
        this.getPanes().markerLayer.id= 'markerLayer' ; 
 
 }; 
 
 myoverlay.setMap(map);

In the line above that calls the getPanes() function, we assign an id to the marker layer so that we can use it in CSS. This overlayView object will automatically collect any markers that are not in another layer. Of course, in this case, no other layers are provided, so this object collects all markers.

(IV) Step 4

Now, we use CSS technology to add animation effects to all tags in the current layer. This animation effect can occur only once or continuously. Please refer to the following code:

 #marker Layer img { 
 
  animation: pulse . 5 s infinite alternate; 
 
  -webkit-animation: pulse . 5 s alternate infinite; 
 
 transform-origin: center ; 
 
  -webkit-transform-origin: center ; 
 
 }

3. More flexible settings

Using the steps above will allow you to instantly add animation to all of your markers. In this section, we'll look at a few more options to give you more control over animating your markers.

(I) External switching

For example, you want to include a legend or some clickable toggle buttons so that users can show and hide different layers, or want to make the marker have some characteristics so that it changes its corresponding CSS animation. All of these ideas are easy to implement! You just need to use a jQuery.click() handler function, please refer to the following code snippet:

 $( '.btn' ).click(function(){ 
 
   $( '#markerLayer img' ).css( 'animation' , 'myAnimationOptionsHere' ); 
 
   $( '#markerLayer img' ).css( '-webkit-animation' , 'myAnimationOptionsHere' ) 
 
 })

(2) Create click/hover events

Want to add a short animation when the user hovers over a marker or clicks it? That's easy. First, create a global array to store all the markers:

 var allMarkers=[];

Then, when you declare each tag, add a title attribute and convert it to a string:

 var marker = new google.maps.Marker({ 
 
 position :latLng, 
 
 map: map, 
 
 icon: catIcon, 
 
 optimized: false, 
 
    title: allMarkers.length.toString() 
 
 });

Next, add a title attribute that depends on the length of the array to create a unique id for each marker. Finally, add the marker to the array using the following code:

 allMarkers.push( marker );

Finally, let's look at the implementation of the click and hover events. Note: We identify each marker by using a single title identifier:

 google.maps.event.addListener( marker , 'click' , function() { 
 
  var thisTitle= Number(this.title); 
 
  $( '#markerLayer img' ).eq(thisTitle).css()... 
 
 }) 
 
 google.maps.event.addListener( marker , 'mouseover/mouseout' , function() { 
 
  var thisTitle= Number(this.title); 
 
  $( '#markerLayer img' ).eq(thisTitle).css()... 
 
 })

(III) Use different animation effects for different tags

Let's consider a scenario where you have two separate marker types added to a map: a baseball field and a soccer field. Since both are automatically included in the overlay you create, you need a way to apply separate animations to the different markers. This is easy to do! Simply use the src attribute in your CSS and match the image URL to the respective marker. See the code below:

 #marker Layer img[src= '/img/myURLpath' ] { 
 
    animation: pulse . 5 s infinite alternate; 
 
    -webkit-animation: pulse . 5 s alternate infinite; 
 
    transform-origin: center ; 
 
    -webkit-transform-origin: center ; 
 
 }

IV. Summary

As a developer or designer, your main job is to build a product that your users love. In fact, they have already seen a lot of Google Maps applications in the products they use. Now it’s up to you to meet their fervent expectations!

Finally, here are a few ways to use map marker animation to suit your users’ needs:

• If you have a marker image that simulates a real thing (such as a cat), you can use a corresponding CSS animation to simulate natural movement.
• If your map marker images are not actual moving objects (such as counters), you can use CSS animation effects to simulate the images jumping or trembling when you click on them.
• If you have data corresponding to each marker, you can make the markers react to that data. For example, you can mark intersections with heavy traffic: you can put a flashing exclamation mark at those locations.

Give it a try, keep at it, and your user base will surely flock to you!

Original title: Creating Animated Google Map Markers with CSS and JavaScript

[Translated by 51CTO. Please indicate the original translator and source as 51CTO.com when reprinting on partner sites]