Many of you would have wondered how we can integrate google maps to your web application . This tutorial would help you to do the same in a simple way using javascript and php . I am providing you a detailed description of Google Map Integration .
Your First Map
You need to get a Google Map API to continue . You can register here for a Google Map API key .
Incorporating a Google map into your website is surprisingly easy, accomplished with just a few lines of code. Begin by copying and pasting the following snippet into an HTML file, remembering to replace ADD_YOUR_KEY_HERE with your own API key. Then save and upload the file to a Web server.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ADD_YOUR_KEY_HERE" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-83.022206, 39.998264), 3);
</script>
</body>
</html>
The output of above code is
Adding Mapping Markers
The maps are really useful. However, their utility can be taken to the next level by overlaying markers indicating a specific location or set of locations on the map . You just need to know the longitude and latitude of the location .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ADD_YOUR_KEY_HERE" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
var point = new GPoint(76.2739795,9.9211342);
map.centerAndZoom(point, 3);
var marker = new GMarker(point);
map.addOverlay(marker);
</script>
</body>
</html>
The output of Google Mapping Marker code is
Adding Description Marker
Google Map API provide provision to add description along with the marker you add . We just need the latitude and longitude of the location we are mapping .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ADD_YOUR_KEY_HERE" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
var point = GPoint(76.27562,9.97943);
var address = 'Marine Drive | GCDA complex | Cochin';
var mark = createInfoMarker(point, address);
map.addOverlay(mark);
function createInfoMarker(point, address) {
var marker = new GMarker(point);
map.centerAndZoom(point, 3);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml(address);
}
);
return marker;
}
</script>
</body>
</html>
The output of the above code plots the map with a description
Conclusion
I have given you a brief description on google API usage . If you need more info on it you can review API documenation .
Hope the tutorial have helped you to implement Google Maps in your application .
Note : In all above examples we plotted the map using longitude and latitude value .
We can get latitude and longitude from an address using PHP – geocoding – I have explained it here .
#1 by emt training on May 12, 2010 - 9:48 am
Wow this is a great resource.. I’m enjoying it.. good article
#2 by Tejbahadur on July 7, 2010 - 11:08 am
after adding the api key javascritp is prompting a error like firstchild is null and map is not displayed in my application.the web application is http://localhost/testing/test.php . please suggest the way
#3 by Holly Perkins on August 5, 2010 - 2:18 pm
Its greate…!
#4 by Sreeraj on August 31, 2010 - 8:27 am
Its very useful
Thanks
#5 by Sachu on August 31, 2010 - 12:34 pm
Using this Code error Came .