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.
Setup Google Map & HTML Structure
The HTML markup & the CSS looks like below:
[html]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Demo: Enhance Google Map Interactivity with jQuery & 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" />
<style>
#html-text {
float: left;
margin-right: 30px;
}
#map-canvas {
height: 300px;
float: left;
width: 500px;
}
</style>
</head>
<body>
<h1>Demo: Enhance Google Map Interactivity with jQuery & Google Map API</h1>
<div id="html-text">
<h2>Visit Malaysia: Point of Interest</h2>
<p>*mouse over on the link below</p>
<ul>
<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>
</ul>
<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>
</body>
</html>
[/html]
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.
[javascript]
<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>
[/javascript]
JavaScript
Basically, we need 2 functions – one 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:
[javascript]
<script>
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"),
mapOptions);
// 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
});
allMyMarkers.push(marker);
}
}
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) {
allMyMarkers[j].setAnimation(null);
} else {
allMyMarkers[j].setAnimation(google.maps.Animation.BOUNCE);
map.setCenter(allMyMarkers[j].getPosition());
}
break; // stop continue looping
}
}
} // end toggleBounce
</script>
[/javascript]
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.
[javascript]
$(document).ready(function() {
// init & construct the map
initialize();
$(‘#html-text li a’).hover(function(){
var selectedID = $(this).attr(‘id’);
toggleBounce(selectedID);
});
});
[/javascript]
Conclusion
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.