Apr
08
2011

 

This tutorial demonstrates how to use Google MAP API version 3 to find a location and puts a marker on the MAP. For information about setting up the map, see here: /blog/2011/04/using-google-map-api-3-for-javascript-beginner-how-to-and-example/.

 

New to Version 3 of the API is the Geolocation service, which enables you to retrieve the location information (including longitude and latitude) based on part of an address, such as City, State, and Zip code using the Geocoder. More information can be found here:
http://code.google.com/apis/maps/documentation/geocoding/

[c]
    geocoder.geocode({'address': address}, onGeocodeResult);
[/c]

The accuracy of the information returned naturally depend on how precise the address information you give to the API. You can enter partial information, such as State and ZIP and it will still return a result (as long as they are valid locations). The result may return more than one locations if the address being passed is ambiguous. The call is to the Geolocator asynchronous and the callback should follow this format:

[c]
function onGeocodeResult(result, status) 
{
}
[/c]

 
Following that, let’s see an example of callback code that puts a marker on the map when a location is found:

[c]
function onGeocodeResult(result, status) 
{
	// Get the lattitude and langgitude of the first result (note: real app should check for no result being returned)
	// See http://code.google.com/apis/maps/documentation/geocoding/
	var myLatitudeAndLangutude=new google.maps.LatLng(result[0]['geometry']['location']['lat'](),
		result[0]['geometry']['location']['lng']());

	// Show a marker in the first result.
	// See http://code.google.com/apis/maps/documentation/javascript/overlays.html		
	marker = new google.maps.Marker({
		map:map,
		draggable:true,
		animation: google.maps.Animation.BOUNCE,
		position:myLatitudeAndLangutude
	});
	map.panTo(myLatitudeAndLangutude);
	
	var myOptions = {
		zoom: 8,
	}	
	map.setOptions(myOptions);
}
[/c]

The running example is shown below. For starters, try entering your city and/or zip into the text box and click the button. Entering a full address can be comma separated — or not — the API is pretty smart even if you don’t use commas:

Note that that you can enter a landmark into the box, such as “Statue Of Liberty” and it will find it!

Direct link to the example to see the source: http://www.permadi.com/tutorial/google-map-api-examples/google-map-api-geolocation-example.html

Here’s another example where I prefilled the address with “Eiffel Tower” and have the map load that address (location) automatically:


The code is virtually the same as in the previous example, except I changed the mapTypeId to MapTypeId.HYBRID and zoomed to a larger value.

[c]
function initialize() {
  var myLatlng = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 20,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  }
  map = new google.maps.Map(document.getElementById("map_div"), myOptions);
  geocoder = new google.maps.Geocoder();
  geocode("Eiffel Tower");
}
[/c]

By the way, the following code is used to display the result’s formatted_address using InforWindow:

[c]
	var infowindow = new google.maps.InfoWindow({
		content: result[0]['formatted_address']
	});
	infowindow.open(map,marker);
[/c]

Direct link to the example to see the source: http://www.permadi.com/tutorial/google-map-api-examples/google-map-api-geolocation-example-eiffel-tower.html. With the same code, you can easily prefill the address with your own to create a map showing your location.

 

As a last note, when using the Google Map API, make sure to follow: Google Map Terms Of Use. Note that using the Geolocator without showing a map is not allowed.

Leave a Reply

*