Google Map For Beginners

I was just working understand how the Google maps work and how developer use the Google maps in there web site. Now I have created a sample page for the Google map and I would like to share this example with you so that you can also get starting point of the Google maps.Below is the image of the example. Here you can see that I have Google map and one table below the Google map( will describe later).

Image 1

And here is the what I want to achieve , I want to get all possible result when user click on particular on the Google maps and that result should be displayed in table like format.

Image 2

In order to get started with Google what you have to do is to get a Google map key, the Google map key is important if you want to place you project live, if you used it locally on your PC then you don't need any Google Key.To get Google map key you can go here to get the Google map key. From there what you have to do is to give the URL of your web site. For example my blog URL is http://asimsajjad.blogspot.com, So I have to put this URL in "My web site URL" input box and accept the terms and click the Generate Key button. In the next page you have four ways to include Google map key in your project, first one is simple key, second one is the Script tag that include key, maps API for flash and HTTP Service example. for you if you need to used it in the web project you go for second option "JavaScript Maps API Example".

< script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA8RrNA2ad3sXGIzKjA4Rq5hSMhSD8o7XRZ8sp4sebDRHHwO96tRQCUNJChXwnEcob6qAGQYpm4rNG6Q"
type="text/javascript"> < /script>

Use of the Google Maps API now requires that you indicate whether your application is using a sensor (such as a GPS locator) to determine the user's location. This is especially important for mobile devices. Applications must pass a required sensor parameter to the <script > tag when including the Maps API javascript code, indicating whether or not your application is using a sensor device.Applications that determine the user's location via a sensor must pass&sensor=true when loading the Maps API JavaScript via either the http://maps.google.com/maps or with the Common Loader.

Note: As in my case I have give base URL of my blog, Now I can use this key for multiple pages on my blog if you want to generate key per page then you have to give complete URL including page name in the "My web site URL", But it is best to have same key for all the pages in the web site.

Next you have to put below tag in the body of the form and note that the id of the div tag. As this id is used to load the Google map, and will be passed to the GMap2 constructor.

< div id="map_canvas" style="width: 800px; height: 600px; border: 0px solid #466094;background-color: #EEF0F6;">
< /div>

Below is the my code which is used to initialize the object and load the Google map , and the initialize function is called when the window is loaded.The JavaScript class that represents a map is the GMap2 class. Objects of this class define a single map on a page. When you create a new map instance, you specify a DOM node in the page (usually a div element) as a container for the map. HTML nodes are children of the JavaScript document object, and we obtain a reference to this element via the document.getElementById() method.

var googleMap;
var geocoder;
var address; ;

function initialize() {
if (GBrowserIsCompatible()) {
googleMap = new GMap2(document.getElementById("map_canvas"));
googleMap.setCenter(new GLatLng(53.3042827, -6.2401578), 13);
point = new GLatLng(53.3042827, -6.2401578);
marker = new GMarker(point);
googleMap.addOverlay(marker);
googleMap.setUIToDefault();
geocoder = new GClientGeocoder();
GEvent.addListener(googleMap, "click", function(overlay, latlng) {
address = latlng;
geocoder.getLocations(latlng, showAddress);
});
}
}

Once you have created a map via the GMap2 constructor, we need to initialize it. This initialization is accomplished with use of the map's setCenter() method. The setCenter() method requires a GLatLng coordinate and a zoom level and this method must be sent before any other operations are performed on the map, including setting any other attributes of the map itself. Additionally, we also call setUIToDefault() on the map. This method sets up the map's user interface (input handling and set of controls) to a default configuration, including pan and zoom controls, selection of map types, etc. See Using the Default Maps UI in the Controls chapter for more information.

I have also declare the variable of geocoder name which is used for the reverse coding.The term geocoding generally refers to translating a human-readable address into a point on the map. The process of doing the converse, translating a point into a human-readable address, is known as reverse geocoding. I have also attached click event with the googleMap object. In the click event of the googleMap object I have used the function of getLocations of geocoder object .The GClientGeocoder.getLocations() method supports both standard and reverse geocoding. If you pass this method a GLatLng object instead of a String address, the geocoder will perform a reverse lookup and return a structured JSON object of the closest addressable location. Note that the closest addressable location may be some distance from the original latitude and longitude values of the query, if the supplied GLatLng is not an exact match for any addressable locations.For the accuracy you can see the following below is the table with the constant value and description.

Constant
Description
0
Unknown location
1
Country level accuracy. 
2
Region (state, province, prefecture, etc.) level accuracy. 
3
Sub-region (county, municipality, etc.) level accuracy.  
4
Town (city, village) level accuracy. 
5
Post code (zip code) level accuracy. 
6
  Street level accuracy.
7
Intersection level accuracy. 
8
Address level accuracy. 
9
Premise (building name, property name, shopping center, etc.) level accuracy.

Hope you can get some starting point of how to use Google map in your applications.Click Here To view online sample.

References:
1- Map Basics
2- Google Maps API Concepts
3- Services

All and any comments / bugs / suggestions are welcomed!