Geoposicionamiento web y la API de Google Maps V3

martes, 29 de diciembre del 2009

guardado en Api, Geolocalización, Geoposicion, Google, Google Maps, Javascript

El otro día hablabamos de Cómo geoposicionar un dispositivo con el navegador, pero por si sola no podemos darle mucha utilidad, puesto que necesitamos ejecutar algo en el successCallback. Y aquí es donde aparece la nueva versión de la API de Google Maps V3. La API Javascript es muy parecida a su antecesora, la versión 2. Sin embargo ha cambiado mucho internamente, ya que ha sido diseñada para cargar más rápidamente, especialmente en navegadores móviles, como los dispositivos basados en Android y el iPhone™.

Una caracteristica muy destacable de esta nueva versión es que ha sido implementada usando un marco de trabajo MVC. También cabe descatacar la desaparición de API key, lo cual elimina trámites previos a la hora de implementar tu trabajo en diferentes dominios.

Ponerlo en marcha es realmente fácil. Sólo tienes que seguir estos 5 sencillos pasos:

Incluir el código JavaScript de la API de Google Maps usando la etiqueta script

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

Crear un elemento div llamado "map_canvas" para contener el Mapa.
```
<div id="map_canvas" style="width:100%; height:100%"></div>
```

Crear un objeto en JavaScript para guardar una serie de propiedades del mapa.

var myOptions = {
   zoom: 8,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

Escribir una función de JavaScript para crear el objeto "mapa".

function initialize() {
   var latlng = new google.maps.LatLng([latitud], [longitud]);
   var map = new google.maps.Map(
      document.getElementById("map_canvas"),
      myOptions
   );
}

Inicializar el objeto mapa en la función onload del body.
```
<body onload="initialize()">
```

Nostros, en Pixelovers, hemos querido ir un poco más lejos y hacer una prueba de integración con el borrador de la especificación de la API de Geoposicionamiento de la W3C. Como ya os dijimos la función successCallback necesitaba pintar los datos obtenidos en un mapa. Pues qué mejor hacerlo con la nueva API de Google Maps.

La demo consta de 2 partes, una primera que pretende simplemente mostrar la posición actual y gestionar los posibles errores. Y otra segunda parte que pretende dar una utilidad práctica a ese resultado. Por tanto, una vez geoposicionado, podrás filtrar una lista que aparece atendiendiendo al país donde te encuentras.

Nota: Solo se han usado para la demo los 3 países con más visitantes de Pixelovers, España, México y Argentina, al resto también os apreciamos, pero si no, la demo sería muy extensa.

Demo

¿Qué te parece la nueva versión de la API de Google Maps? ¿Ya la has probado? Cuentanos qué te ha parecido.