" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
Implementing Google maps with with jQuery is quite easy once you know it. In this tip I am going to demonstrate how you it can be done.
For implementing Google maps, the first thing you need is the Google maps api key for your website.A single Maps API key is valid for a single “directory” or domain only. You can also get a api key for http://localhost for testing purposes.
Link for getting api key : http://code.google.com/apis/maps/signup.html
Then you have to to add this script to your page.
http://itouchmap.com/latlong.html
For loading a particular location by default you need the Latitude and Longitude of that Point.
Link for getting Latitude and Longitude :
Now through jQuery you can load the map on your web page.
<script type="text/javascript" charset="utf-8">
google.load("maps", "2.x");
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var map = new GMap2(document.getElementById('map'));
//setting the latitude and longitude of Bhubaneswar
var mindfire = new GLatLng(20.305762001399983,85.85395932197571);
//Setting the map's zoom level
map.setCenter(mindfire , 11);
});
</script>
//*******************************************************//
// Complete code for testing. //
//*************************************************************//
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<script type="text/javascript"
src="http://www.google.com/jsapi?
key=ABQIAAAALHm9EWlgHsfkEEZCBSRd5BT2yXp_ZAY8_ufC3CFXh
HIE1NvwkxSS3jA4__olTyASAEEhZB7d21qe_g"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
google.load("maps", "2.x");
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var map = new GMap2(document.getElementById('map'));
var mindfire = new GLatLng(20.305762001399983,85.85395932197571);
map.setCenter(mindfire, 11);
});
</script>
<style media="screen" type="text/css"> #map { width:500px; height:500px; }
</style>
<title>Google Map with jQuery</title>
</head>
<body>
<div id="map"></div>
</body>
</html>