How To Animate A Map Location Marker With CSS

In this quick tutorial, we will build an animated map location marker or pin using pure CSS. We could apply this technique to spruce up our contact page or maybe our about page. This will add a nice subtle touch to help pull the visitors eye towards our business location. Let’s dig in.

Grab a Map

You’ll need to design or screenshot a map to use as the background for our marker. Any height will do, but make sure it is at least as wide as the container div you’re placing it in. We’ll be applying this image by using the CSS background property.

Add the HTML

The HTML in this project couldn’t be any more simple. Just place four empty divs with appropriate class names within your container div.

<div class="map-bg"> <div class="marker"> <div class="pin"></div> <div class="pin-effect"></div> </div> </div>

The map-bg div does exactly what it is named, it's a place to display our map as a background image. The marker div will contain both our location pin and our animation, allowing us to position it on the map wherever we choose. The pin div is our location and is centered within our marker. Lastly, our pin-effect div is also centered within our marker, sits underneath our pin (using z-index) and houses our animation.

Add the CSS

I'll split the CSS code into two sections separating your normal everyday typical CSS from the animation. Just remember that all of the CSS is located in the same file.

Typical CSS

Nothing too special here. First, we designate our map background. Second, we place the marker where we want by adjusting the top and left positions. Third, we create our pin, give it a color and border while giving it a z-index of 1000, to make sure it sits above our .pin-effect. Lastly, we give our animation a color, name the animation (pulsate) while telling it to play the animation over a period of 2400 milliseconds. We also let the browser know that we want to do this an infinite number of times.

.map-bg { background: url(images/map-bg.jpg) no-repeat; background-position: 0px 0px; background-size: auto; width: 100%; height: 440px; /*adjust to the height of your image*/ position: relative; } .marker { width: 100px; height: 100px; position: absolute; top: 130px; /*positions our marker*/ left: 200px; /*positions our marker*/ display: block; } .pin { width: 20px; height: 20px; position: relative; top: 38px; left: 38px; background: rgba(5, 124, 255, 1); border: 2px solid #FFF; border-radius: 50%; z-index: 1000; } .pin-effect { width: 100px; height: 100px; position: absolute; top: 0; display: block; background: rgba(5, 124, 255, 0.6); border-radius: 50%; opacity: 0; animation: pulsate 2400ms ease-out infinite; }

Animate the CSS

We use keyframes with a name of pulsate to scale (transform) the animation effect from 0.1 to 1.2 across the entire animation while changing the opacity from 0 at the beginning to 1 at halfway through and then fading it back out to 0 at the end the animation.

@keyframes pulsate { 0% { transform: scale(0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }

We're done! Let's take a look at it in action.

Tips

I'm going to assume that you will be placing this inside of a responsive design. With that in mind, we position the map background image to the left. Also, the last thing we want is for our marker to be positioned off screen while being viewed on a mobile device. If it appears that your marker position will be off screen, we can simply implement a media query to reposition the map background image and marker accordingly.

For example, let's reposition the background and marker to the left 100px for a smaller screen like so...

@media only screen and (max-width: 414px) { .map-bg { background-position: -100px 0px; } .marker { left: 100px; } }

You can resize the browser you're in right now to a width of 414 pixels or less and see the reposition happen in the example above.

Final Thoughts

This is just a simple tutorial showing how to use this technique. Get creative by adding more style, adapting the colors to fit with your site or maybe adding a tooltip to the marker that displays the address while hovering. The options are endless. If you like the tutorial, have a question about the code or have implemented it somewhere in your designs and want to share it, please leave a comment below.

Download Source

Suggested Posts