Introduction to Google Maps.
- By Viral Patel on January 31, 2009
- JavaScript, Web 2.0
Google Maps API have been in tech world since quite a long period. Recently I had a chance to try my hands on Google Maps API. If you like JavaScript believe me you will gonna love Google Maps API. Thousand of APIs are available to paint a lot of things on Google Map. You can describe a wind range of data using Google Maps API.
Generate key for your website.
In order to use Google Map API, first you need to generate an API key that you will use to include google maps javacript in your web page.
To generate API, goto http://code.google.com/apis/maps/signup.html
Displaying a Simple Map.
To paint a simple map showing a particular location use following code.
<script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;v=2&amp;amp;amp;amp;sensor=false&amp;amp;amp;amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
Online Demo
Display an Infobox in your map.
To display an infobox, modify your initialize() method and add following code in it.
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
}
}
Online Demo
Latitude/Longitude tracing demo.
I have created a simple demo that display latitude/longitude of any place where you click on google map.
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(18.4419, 73.1419), 8);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
} else {
var marker = new GMarker(point);
map.addOverlay(marker);
var lat = point.y;
var lng = point.x;
marker.openInfoWindowHtml("Latitude:"+lat+"<br/>Longitude:"+lng);
}
});
}
}
Online Demo
There are thousands of things that you can do with these api’s. I will try to post articles on how one can combine google maps with JSP/J2EE/Struts/JSON etc and create a simple but useful application.
Get our Articles via Email. Enter your email address.
