Home » Tutorials » JavaScript » Enhancing Google Map Interactivity with jQuery

Enhancing Google Map Interactivity with jQuery

Enhancing Google Map Interactivity with jQuery

This tutorial will show you how to enhance your website’s Google Map creatively with Google Map Javascript API v3 library & jQuery.

The tutorial will cover how to animate the map’s marker pin & pan the map to the selected location when you mouse over a list of location outside the map. Take a look at the demo.

*If you are developing for business purpose, then you may need a Google Map API key to load the Google Map. We assume you are immediate level of web designer / web developer, so this tutorial will be focus entirely on enhancing the interactivity of the map, so we will not talk about what is API / how to get API key. If you are new to Google Map API, please check out the API document here.

Setup Google Map & HTML Structure

The HTML markup & the CSS looks like below:

<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Demo: Enhance Google Map Interactivity with jQuery &amp; Google Map API</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
<meta name="description" content="Web Development Tutorial enahce Google Map Interactivity with jQuery & Google Map API">
<meta name="keywords" content="Google Map, Map, API, MAP API, jQuery Map, jQuery, Interactivity" />
#html-text {
	float: left;
	margin-right: 30px;

#map-canvas {
	height: 300px;
	float: left;
	width: 500px;
<h1>Demo: Enhance Google Map Interactivity with jQuery &amp; Google Map API</h1>
<div id="html-text">
	<h2>Visit Malaysia: Point of Interest</h2>
	<p>*mouse over on the link below</p>
		<li><a id="pin_0" href="#">Petronas Twin Tower</a></li>
		<li><a id="pin_1" href="#">Kuala Lumpur Tower</a></li>
		<li><a id="pin_2" href="#">Kuala Lumpur Bird Park</a></li>
		<li><a id="pin_3" href="#">National Mosque of Malaysia</a></li>
		<li><a id="pin_4" href="#">Merdeka Square</a></li>
	<p>Click here to continue reading the tutorial - <a href="http://www.onlywebpro.com/2014/09/01/enhancing-google-map-interactivity-with-jquery/">Enhancing Google Map Interactivity with jQuery</p>
</div><!-- END html-text -->

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

Please be noted, we need to assign each HTML text link (inside ‘html-text’ div) with an unique ID. This will be allowed us to interact with the map later.

Besides, we need a div with ID – ‘map-canvas‘ to display a map using Google Map API.

jQuery Library & Google Map API Library

We already have the HTML & CSS ready. We can start building our map with Google Map API v3 & enhance its interactivity with jQuery. Do notice that we must include jQuery (Google CDN) & Google Map API v3 library into our HTML document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>


Basically, we need 2 functionsone is to initialize a map with Google Map API; another one is to pan the map & animate the map’s pin.

First, we will initialize a Google Map, and draws all locations’ pins to the map as shown below:

var allMyMarkers = [];
var map;

function initialize() {
	var locations = [
		['Petronas Twin Tower','3.1579','101.7116'],
		['Kuala Lumpur Tower','3.152866','101.7038'],
		['Kuala Lumpur Bird Park','3.14312','101.68835'],
		['National Mosque of Malaysia','3.141692','101.691645'],
		['Merdeka Square','3.147847','101.693433']
	var mapOptions = {
	  center: new google.maps.LatLng(3.1579, 101.7116),
	  zoom: 17
	map = new google.maps.Map(document.getElementById("map-canvas"),
	// draw marker on map
	for (i = 0; i < locations.length; i++) {
		marker = new google.maps.Marker({
			position: new google.maps.LatLng(locations[i][1], locations[i][2]),
			map: map,
			id: i

function toggleBounce(selectedID) {
	var pinID = selectedID.split('_');
	// loop through our array & check with marker has same ID with the text
	for(var j=0;j<allMyMarkers.length;j++){
		if(allMyMarkers[j].id == pinID[1]){
			if (allMyMarkers[j].getAnimation() != null) {
			} else {
			break; // stop continue looping
} // end toggleBounce

A global array with the name ‘allMyMarkers‘ stored all map’s pins. Then we create a function with named ‘toggleBounce‘. With this function, we can find through the array, to check which pin should be animated & where should the map to pan to, when users mouse over on the HTML link that we have defined earlier in the div ‘html-text’.

Now, lets display the map when document is ready & trigger the ‘toggleBounce’ function when users mouse over on the HTML text links via jQuery.

$(document).ready(function() {
	// init & construct the map
	$('#html-text li a').hover(function(){
		var selectedID = $(this).attr('id');


Hooray! We’ve just created a Google Map using Google Map API & animate the map’s element based on which HTML text links that users mouse over.

View Google Map Demo

Android, iOS Development Tutorials