Cosas curiosas que podemos hacer con la API Google Maps

Vía Tu Función

 

 

Enviado por luishernando a través de Google Reader:

 

 

Cosas curiosas que podemos hacer con la API Google Maps

vía TuFuncion de manu el 31/03/09

Hay muchas cosas divertidas e interesantes para hacer con Google Maps, el número de funcionalidades de Google Maps desde su primera versión han aumentado rápidamente.

Los usuarios que utilizan Google Maps en su tiempo libre lo usan para encontrar su casa, una dirección que necesitan, sitios históticos ó famosos paisajes.

Los desarrolladores a menudo desconocemos de algunas de las funcionalidades de Google Maps que están disponibles para utilizar en nuestras aplicaciones.

AJAX APIs Playground

Antes de nada para aquellos usuarios que no tengan conocimientos previos de Google Maps les recomiendo la utilización de AJAX APIs Playground que nos evita tener que montar una base para nuestros ejemplos y nos podemos limitar a escribir código con base en los fragmentos de código existentes y es más rápido que comenzar desde cero.

Además es una excelente forma para reforzar los conocimientos de herramientas o API nuevas en las que quizá no estés tan familiarizado.

En AJAX APIs Playground vas a encontrar ejemplos básicos de las funcionalidades que se comentan en esta entrada.

El Playground te permite cambiar el código de muestra, volver a ejecutarlo y ver los resultados en tiempo real. Puedes exportar tu código, guardarlo y también obtener una fuente HTML completa. De hecho, para la mayoría de tus necesidades de programación, esta herramienta es todo lo que necesitarás para escribir, depurar e integrar visualizaciones de la API de visualización a tus páginas Web.

Veamos una lista de curiosidades y ejemplos para divertirnos con Google Maps.

Crear rutas con Google Maps

Sin duda una de las más interesantes, con un pequeño código podemos tener un script que planee rutas entre dos direcciones, puedes encontrar la documentación de la API pero como hemos comentado lo mejor es utilizar AJAX APIs Playground.
<!--break-->

From:			To:
Language:	English French German Japanese Spanish

Formatted Directions	Map
		http://maps.google.com/intl/en_ALL/mapfiles/openhand_8_8.cur), default;"> Map data ©2009 Tele Atlas - Terms of Use

 var map; var gdir; var geocoder = null; var addressMarker;  function initialize() {   if (GBrowserIsCompatible()) {           map = new GMap2(document.getElementById("map_canvas"));     gdir = new GDirections(map, document.getElementById("directions"));     GEvent.addListener(gdir, "load", onGDirectionsLoad);     GEvent.addListener(gdir, "error", handleErrors);      setDirections("San Francisco", "Mountain View", "en_US");   } }  function setDirections(fromAddress, toAddress, locale) {   gdir.load("from: " + fromAddress + " to: " + toAddress,             { "locale": locale }); }  function handleErrors(){   }  function onGDirectionsLoad(){  } 

Vista de calles

Este ejemplo es realmente sencillo y nos permite mostrar vistas de Google Street View, es muy interesante porque nos permite añadir a nuestra aplicación un elemento multimedia realmente interesante.

 var myPano;  function initialize() {   var fenwayPark = new GLatLng(42.345573,-71.098326);   panoramaOptions = { latlng:fenwayPark };   myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);   GEvent.addListener(myPano, "error", handleNoFlash); }  function handleNoFlash(errorCode) {   if (errorCode == FLASH_UNAVAILABLE) {     alert("Error: Flash doesn't appear to be supported by your browser");     return;   } }   

Reverse Geocoding

Es lo menos habitual ya que los servicios que ofrecen APIs de mapas suelen ofrecer el servicio de geolocalización pero lo que no suelen es ofrecer el proceso inverso.

Ahora con la clase clase GClientGeocoder que podemos encontrar en la API de Google Maps podemos encontrar ambos servicios "Geocoding" y "Reverse geocoding".

 var map; var geocoder; var address;  function initialize() {   map = new GMap2(document.getElementById("map_canvas"));   map.setCenter(new GLatLng(40.730885,-73.997383), 15);   map.addControl(new GLargeMapControl);   GEvent.addListener(map, "click", getAddress);   geocoder = new GClientGeocoder(); }  function getAddress(overlay, latlng) {   if (latlng != null) {     address = latlng;     geocoder.getLocations(latlng, showAddress);   } }  function showAddress(response) {   map.clearOverlays();   if (!response || response.Status.code != 200) {     alert("Status Code:" + response.Status.code);   } else {     place = response.Placemark[0];     point = new GLatLng(place.Point.coordinates[1],                         place.Point.coordinates[0]);     marker = new GMarker(point);     map.addOverlay(marker);     marker.openInfoWindowHtml(     'orig latlng:' + response.name + '
' +     'latlng:' + place.Point.coordinates[1] + ","  + place.Point.coordinates[0] + '
' +     'Status Code:' + response.Status.code + '
' +     'Status Request:' + response.Status.request + '
' +     'Address:' + place.address + '
' +     'Accuracy:' + place.AddressDetails.Accuracy + '
' +     'Country code: ' + place.AddressDetails.Country.CountryNameCode);   } } 

Agregar marcadores personalizados

Con esta funcionalidad podemos cambiar el aspecto de los marcadores por defecto que nos ofrece la API de Google Maps, es muy útil para personalizar nuestra aplicación y mejorar la funcionalidad de la misma con marcadores más intuitivos.

 var IMAGES = [ "sun", "rain", "snow", "storm" ]; var ICONS = []; var map = null; var mgr = null;  function setupMap() {   if (GBrowserIsCompatible()) {     map = new GMap2(document.getElementById("map"));     map.addControl(new GLargeMapControl());     map.setCenter(new GLatLng(48.25, 11.00), 4);     map.enableDoubleClickZoom();     window.setTimeout(setupWeatherMarkers, 0);   } }  function getWeatherIcon() {   var i = Math.floor(IMAGES.length*Math.random());   if (!ICONS[i]) {     var icon = new GIcon();     icon.image = "http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/"         + IMAGES[i] + ".png";     icon.iconAnchor = new GPoint(16, 16);     icon.infoWindowAnchor = new GPoint(16, 0);     icon.iconSize = new GSize(32, 32);     icon.shadow = "http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/"         + IMAGES[i] + "-shadow.png";     icon.shadowSize = new GSize(59, 32);     ICONS[i] = icon;   }   return ICONS[i]; }  function getRandomPoint() {   var lat = 48.25 + (Math.random() - 0.5)*14.5;   var lng = 11.00 + (Math.random() - 0.5)*36.0;   return new GLatLng(Math.round(lat*10)/10, Math.round(lng*10)/10); }  function getWeatherMarkers(n) {   var batch = [];   for (var i = 0; i < n; ++i) {     batch.push(new GMarker(getRandomPoint(), { icon: getWeatherIcon() }));   }   return batch; }  function setupWeatherMarkers() {   mgr = new MarkerManager(map);   mgr.addMarkers(getWeatherMarkers(20), 3);   mgr.addMarkers(getWeatherMarkers(200), 6);   mgr.addMarkers(getWeatherMarkers(1000), 8);   mgr.refresh(); } 

 

 

Cosas que puedes hacer desde aquí:

• Subscribirse a TuFuncion con Google Reader
• Empieza a utilizar Google Reader para mantenerte al día fácilmente de todos tus sitios favoritos.