mooontes.com » google maps api v3 http://mooontes.com Sun, 12 Feb 2012 09:55:07 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Google Maps API V3 (javascript) http://mooontes.com/2009/07/30/google-maps-api-v3-javascript-2/ http://mooontes.com/2009/07/30/google-maps-api-v3-javascript-2/#comments Thu, 30 Jul 2009 19:14:21 +0000 montes http://mooontes.com/?p=319 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>
]]> http://mooontes.com/2009/07/30/google-maps-api-v3-javascript-2/feed/ 0 Google Maps API V3 (javascript) http://mooontes.com/2009/07/29/google-maps-api-v3-javascript/ http://mooontes.com/2009/07/29/google-maps-api-v3-javascript/#comments Wed, 29 Jul 2009 20:07:52 +0000 montes http://mooontes.com/?p=295 Aunque el API V3 de Google Maps aún está bastante verde y le falta mucho por pulir, ya es bastante usable y si sólo necesitamos las características básicas de Google Maps nos puede servir para nuestro proyecto.

Este código es un ejemplo del uso de varias técnicas con javascript:

  • Centrar el mapa en la ubicación del visitante
  • Captura de eventos
  • Reverse Geocoding
  • Uso de la librería de Nianwei para hacer zoom con la rueda del ratón (aún no soportado oficalmente en la V3)

Probar el código

Y aquí dejo el código, XHTML con doctype y validable, a diferencia de lo que nos tiene acostumbrados google ;) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
** 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() {

		//Inicializamos geocoder y centramos el mapa en la ubicación del visitante
		geocoder = new google.maps.Geocoder();
		if (google.loader.ClientLocation)
		{
			//Averiguamos latitud/longitud del visitante
			var latt = google.loader.ClientLocation.latitude;
			var longg = google.loader.ClientLocation.longitude;

			//Centramos el mapa en sus coordenadas
			var latlng = new google.maps.LatLng(latt,longg);
		}
		else
		{
			//Si no localizamos la ubicacion del visitante, centramos el mapa en Madrid
			var latlng = new google.maps.LatLng("40.41153868","-3.70362707");
		}

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

		//Añadimos un listener, se activará cuando el mapa esté totalmente cargado
		google.maps.event.addListener(map, 'bounds_changed',function()
			{
				//Primera actualización del div que muestra los detalles de la ubicacion actual
				actualizaUbicacion();
				//Al haber cargado totalmente el mapa, eliminamos este listener
				google.maps.event.clearListeners(map, 'bounds_changed');
				//Y añadimos dos, uno se activará cuando se termine de arrastrar el mapa y otro cuando se cambie el nivel de zoom
				google.maps.event.addListener(map, 'dragend',function() { actualizaUbicacion() });
				google.maps.event.addListener(map, 'zoom_changed',function() { actualizaUbicacion() });
			}
		);

	}

	function actualizaUbicacion()
	{

		//Coordenadas del centro del mapa que usaremos para el 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'>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">mooontes.com</a></div>
</body>
</html>
]]> http://mooontes.com/2009/07/29/google-maps-api-v3-javascript/feed/ 1