Introduction to Google Maps.

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="//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>
Code language: HTML, XML (xml)

Online Demo

Click here.

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")); } }
Code language: JavaScript (javascript)

Online Demo

Click here.

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); } }); } }
Code language: JavaScript (javascript)

Online Demo

Click here. 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.

You may also like...

5 Comments

  1. hemant says:

    in Latitude/Longitude tracing demo
    change getElementById(“map”) to (document.getElementById(“map_canvas”));

    • Nice posting.
      I do customization and used my application.

  2. Ranjan Sai says:

    I like to know, is there any way to find the location by zip code using geocode api

  3. samir says:

    Hi,

    Can any one tell me how can i integrate java with google api.
    are there any references for this problem.

  4. hi guys,
    I need a tutorial for this kind of application:
    – an app that gets my location and shows it with a marker on Google map.
    – this app should have a button and when I click on it:
    It select from my database nearest restaurants (within any range, maybe 1 miles) and show them with markers on the map.
    =>of course restaurants are stored in the database with their names and coordinates (latitude & longitude).

    If anyone ever seen any tutorial to do such an app, please tell me.
    Thx

Leave a Reply

Your email address will not be published. Required fields are marked *