Google Map Integration using Javascript | PHP
anoopsachari | Apr 30, 2010 | Comments 22
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 .
Filed Under: articles • featured • javascript
[...] Home « Google Map Integration using Javascript | PHP [...]
Wow this is a great resource.. I’m enjoying it.. good article
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
Its greate…!
Its very useful
Thanks
Using this Code error Came .
i’m a java programmer,but i need your help..i’m sending you an email with problem description..kindly help me
pls.. am a beginer to this field,dont forget to check my mail and give solution
Thanks of this buddy.
FileShare
I was a bit interested how can I add more places in my google map but couldn’t find it how. Actually this explained some basic things that helped me to do it. Thank you!
HI the above code showing map but it not showing zoom in and out and other functionality part i have seen in other site like http://footkey.com/stadium so what i do to impliment that kind of function
Your site looks great! Love the lbog.. If you are interested im any web design feel free to contact me at http://vadoz.ru
Excellent article i am sure that i will come back here soon
Thanx for this, Google Maps is a powerful tool.
Very useful post on google maps, Thank you so much for sharing.
can u pls add how to include the zoom opiton
Could you please tell me what is the difference between these 2 lines:
In this site is very much useful for mapping functions
Thanks, this article was useful, I created first google map today.
Itz is not working in my application
Hi,
I want to know trace location on Google Map using mobile phone number.
Any one can help me !!!
Thanks
Manoj Soyal
nice tutorial, but where the php comes here?