Creating Animated Google Map Markers with CSS and JavaScript

Original image: DeviantArt

The Google Maps API allows web developers to create an excellent user experience with just a few lines of code through their magical, built-in functions.

However, there’s one glaring exception: flexibility and creativity with map markers.

Sure, you can add a custom marker image, a tooltip, and a label. But those are all static, text-oriented ways of interacting, which can become overwhelming on a map with many points. There’s no standard way to create interactive markers that respond to the user’s actions.

I simply wasn’t satisfied with this, so I set out to find a way to create truly distinctive maps. I’m going to show you how to include CSS3 animations on your map markers so that you can have them dance, wriggle and hide until they pretty much jump out of the screen.

If the user hovers over a marker, clicks on it or uses a toggle outside the map, you’ll be able to use any CSS animation to bring it to life. This guide will focus on a simple strategy you can use to include animated markers in any of your projects. (For comparison, two other examples — by Ryan Connolly and Felipe Figueroa — use a similar method.)

Here’s a basic example of animated markers at work. The famous Cheshire Cat acts as a marker for three separate points in Massachusetts, and you can use the toggle in the top right to change his animations:

See the Pen CSS Google Map Markers by SitePoint (@SitePoint) on CodePen.

The Basics

There a few steps you’ll need to take to add CSS animation capabilities to your markers.

Step 1

Add an image to your markers. This is how you specify your image:

[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)
}[/code]

Step 2

Add optimized:false to the marker specification. This allows you to render each marker as a separate DOM element:

[code]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
});[/code]

Step 3

Create an overlayView that will organize all your markers in one pane, which you can then access from the DOM:

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

You can give your marker layer an id on the getPanes() line so you can use it in CSS. This Overlay view will automatically collect any markers that are not already in another layer. In this case, there are no other layers, so it collects all markers.

Step 4

Use CSS to give an animation to all markers in your layer. This can be an animation that happens once, or happens continuously:

[code language="css"]#markerLayer img {
animation: pulse .5s infinite alternate;
-webkit-animation: pulse .5s infinite alternate;
transform-origin: center;
-webkit-transform-origin: center;
}[/code]

Continue reading %Creating Animated Google Map Markers with CSS and JavaScript%

by Kevin Kononenko via SitePoint