Google Maps API V3 (javascript)

Posted: July 30th, 2009 | Author: montes | Filed under: programacion | Tags: , , , , | No Comments »

Versión en español de este post

Although the Google Maps API V3 is still quite green and much remains to be polished, it is quite usable and if you only need the basic features of Google Maps, then you can use it for your project, the new speed and usability at portable devices is a plus.

This code is an example of the use of various techniques with javascript:

  • Map centering at user’s location
  • Event capturing
  • Reverse Geocoding
  • Use of Nianwei’s library scrollwheelzoom (still not officially supported in V3)

Test the code

And here is the code (validated XHTML with Doctype).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
** Created at 2009 July by Montes http://mooontes.com
** Under licence http://creativecommons.org/licenses/by/3.0/es/deed.es
**
** Google Maps API V3 javascript example
**
** Visitor's location map centering, event capturing,
** reverse geocoding & Nianwei's scrollwheelzoom
**
**
** Creado en Julio de 2009 por Montes http://mooontes.com
** Bajo licencia http://creativecommons.org/licenses/by/3.0/es/deed.es
**
** Ejemplo de programación con Google Maps API V3
**
** Centrado del mapa en la ubicación del visitante, captura de eventos,
** reverse geocoding y uso de la libreria para hacer zoom con la rueda del ratón
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<title>Test Google Maps API V3 -mooontes.com-</title>

    <style type="text/css">
	html
	{
		border:0;
		padding:0;
		margin:0;
		width:100%;
		height:100%;
	}
	body
	{
		border:0;
		padding:0;
		margin:0;
		width:100%;
		height:100%;
	}
	#map_canvas
	{
		width:100%;
		height:100%;
	}
	#info
	{
		position:absolute;
		width:250px;
		height:250px;
		left:20px;
		top:300px;
		background-color:white;
		padding:5px;
		overflow:auto;
	}
    </style>

	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>	

	<script type="text/javascript">
	var map;
	var geocoder;

	function initialize() {

		//Geocoder initialization & visitor's location map centering
		geocoder = new google.maps.Geocoder();
		if (google.loader.ClientLocation)
		{
			//Search for visitor's latitude and longitude
			var latt = google.loader.ClientLocation.latitude;
			var longg = google.loader.ClientLocation.longitude;

			//Center the map at visitor's coordinates
			var latlng = new google.maps.LatLng(latt,longg);
		}
		else
		{
			//If we can't get visitor's coordinates, set Madrid as map center
			var latlng = new google.maps.LatLng("40.41153868","-3.70362707");
		}

		//Create the map
		var myOptions = {
		zoom: 5,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

		//Add a listener, it will activate when the map become fully loaded
		google.maps.event.addListener(map, 'bounds_changed',function()
			{
				//First div's update to show actual location details
				actualizaUbicacion();
				//Map fully loaded, clear the listener
				google.maps.event.clearListeners(map, 'bounds_changed');
				//And add two new events, one will update the div's info when user ends dragging the map and the other when map's zoom changes
				google.maps.event.addListener(map, 'dragend',function() { actualizaUbicacion() });
				google.maps.event.addListener(map, 'zoom_changed',function() { actualizaUbicacion() });
			}
		);

	}

	function actualizaUbicacion()
	{

		//Map's center coordinates we'll use for reverse geocoding
		var lattlng = map.getCenter();

		if (geocoder)
		{
			geocoder.geocode({'latLng': lattlng}, function(results, status)
			{
				if (status == google.maps.GeocoderStatus.OK)
				{
					if (results[1])
					{
						var reverse_geo = results[1];

						var text = "<a href='http://mooontes.com/2009/07/30/google-maps-api-v3-javascript-2/'>Back to post at mooontes.com<"+"/a><br /><br />Map center: "
							+ map.getCenter()+ "<br /><br />Reverse Geocoding:<br />";
						if (reverse_geo.address_components[0]) { text = text + "0: " + reverse_geo.address_components[0].long_name + "<br />"; }
						if (reverse_geo.address_components[1]) { text = text + "1: " + reverse_geo.address_components[1].long_name + "<br />"; }
						if (reverse_geo.address_components[2]) { text = text + "2: " + reverse_geo.address_components[2].long_name + "<br />"; }
						if (reverse_geo.address_components[3]) { text = text + "3: " + reverse_geo.address_components[3].long_name + "<br />"; }
						if (reverse_geo.address_components[4]) { text = text + "4: " + reverse_geo.address_components[4].long_name + "<br />"; }

						text = text + "5: " + reverse_geo.formatted_address;

						document.getElementById('info').innerHTML = text;
					}
				}
				else
				{
					document.getElementById('info').innerHTML = "No hay información de Reverse Geocoding.";
				}
			});
		}
	}

	//--></script>

</head>
<body onload="initialize()">
	<div id="map_canvas"></div>
	<div id="info"><a href="http://mooontes.com/2009/07/30/google-maps-api-v3-javascript-2/">Back to post at mooontes.com</a></div>
</body>
</html>

Leave a Reply