En el artículo anterior hemos realizado una pequeña introducción para conocer el API de Google Maps detallando las ventajas que nos proporciona en nuestro proyecto web. En los siguientes artículos comenzaremos a ver ejemplos concretos de implementación. En este artículo veremos como realmente funciona, como se comportará nuestra aplicación web y como podemos geolocalizar la posición actual y posicionarla en un mapa con ciertas características. Vamos a comenzar viendo como funciona la API.
¿Como funciona la API de Google Maps?
Para el desarollo nos ayudaremos de las característica de HTML5 y de Javascript trabajando en conjunto. Los mapas tan solo son imágenes obtenidas a través de peticiones AJAX (Llamadas Asíncronas al servidor de Google) las cuales se montan en un una capa div. Con el mapa cargado en el navegador cada vez que empleas alguna de sus herramientas, se envía información tambien através de AJAX actualizando el contenido.
El API consiste de un fichero JavaScript externo que contienen las clases, métodos y propiedades necesarias para el manejo de los comportamientos de los mapas. Pero antes de comenzar debemos de tener claro ciertos conocimientos del dominio del problema.
Las coordenadas en Google Maps se encuentran expresadas empleando números decimales que coinciden con la latitud y la longitud del punto respecto a la Tierra.
La latitud es la distancia que existe entre un punto cualquiera y el Ecuador, medida sobre el meridiano que pasa por dicho punto. Todos los puntos ubicados sobre el mismo paralelo tienen la misma latitud. Aquellos que se encuentran al norte del Ecuador reciben la denominación Norte (N). Aquellos que se encuentran al sur del Ecuador reciben la denominación Sur (S).Su dominio es de 0º a 90º. Al Ecuador le correspondería la latitud de 0º mientras que el máximo que se encuentra en los polos Norte y Sur tienen latitud 90º N y 90º S respectivamente.
La longitud es la distancia que existe entre un punto cualquiera y el Meridiano de Greenwich, medida sobre el paralelo que pasa por dicho punto. Todos los puntos ubicados sobre el mismo meridiano tienen la misma longitud. Aquellos que se encuentran al oriente del meridiano de Greenwich reciben la denominación Este (E). Aquellos que se encuentran al occidente del meridiano de Greenwich reciben la denominación Oeste (O). Su dominio es de 0º a 180º. Se toma el meridiano de Greenwich como la longitud de 0º. El antimeridiano correspondiente está ubicado a 180º. Tanto el polos Norte y Sur no tienen longitud.
En los mapas físicos, las coordenadas están expresadas en grados, minutos y segundos, por lo tanto se debe de realizar una operación matemática para convertir estos datos en grados a decimales:Se debe de pasar tanto los minutos como los segundos a grado. Para ellos los minutos se dividen entre 60 y los segundos se dividen entre 3600. Por ejemplo veremos las coordenadas correspondientes al centro de Madrid:
(40° 26′ 70″ N) = (40 + (26 / 60) + (70 / 3600)) = 40.4527
(3° 41′ 68″ W) = -(3 + (41 / 60) + (68 / 3600)) = -3.702
La longitud es negativa porque se encuentra a la izquierda (oeste) del punto 0,0. Lo mismo ocurriría con la latitud si se encontrara por debajo del Ecuador (sur).
Empleando la geolocalización
El proceso geolocalización consiste en obtener la ubicación exacta o aproximada del lugar del mundo donde se encuentre el cliente. HTML5 proporciona una API que nos proporciona esta funcionalidad. Se trata de una interfaz de alto nivel de acceso a la información de localización asociada solamente con el dispositivo anfitrión de la aplicación, tales como latitud y longitud. Las fuentes de las cual obtiene estos atributos pueden ser el Sistema de Posiconamiento Global (GPS) o la ubicación obtenida por señales de red como pueden ser IP, Wifi o Bluetooth. Esta API nos permite tanto obtener los atributos de una posición en un instante determinado, realizar sucesivas peticiones de actualización de la posicion del dispositivo e incluso consultar ciertas posiciones almacenadas en la memoria caché.
Ejemplo de código fuente
Lo primero que debemos de incorporar a nuestro fichero html es el DOCTYPE para que el navegador sepa que se van a trabajar con características HTML5. Seguidamente debemos de incorporar la librería externa de Google a través de la etiqueta Script:
|
1 |
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> |
A continuación se debe definir un div dentro del body que sera utilizado para pintar dentro el mapa correspondiente. Se crea una etiqueta div con un id único para obtenerla posteriormente desde el código javascript. Dentro de el cuerpo body cuando la página esté cargando debe llamarse a una función localize() que se encargará de obtener la posición actual y pintarla en el div apoyandose en la api de Google Maps. El código HTML5 necesario es el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>Google Maps Javascript API V3 y Geoposicionamiento</title> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <style> #map { width: 100%; height: 300px; border: 1px solid #d0d0d0; } </style> </head> <body onLoad="localize()"> <h1>Google Maps Javascript API V3 y Geoposicionamiento</h1> <div id="map" ></div> </body> </html> |
Google Maps Javascript API V3 y Geoposicionamiento
Una vez tenemos el html listo vamos a proceder a realizar el codigo javascript. La función que será llamada por nuestra web cuando cargue será la función localize(). Esta función obtiene la localización actual siempre que el navegador sea compatible con esta característica. Una vez hemos permitido el acceso a nuestra geolocalización comenzamos a trabajar con el API de Google Maps.
Lo primero que debemos de obtener es el div a través de la id que anteriormente le hemos asignado ya que lo que necesita el constructor de la clase new google.maps.Map además de un JSON con ciertas propiedades que deseemos del mapa. Entre estas propiedades,para este ejemplo, se encuentran el nivel de zoom deseado para el mapa, que posición será el centro o el tipo de mapa a previsualizar, en nuestro caso ROADMAP. Hay multitud de características más que se detallarán en futuros artículos. Además entre las herramientas que permite Google Maps es la de posicionar Marcadores, también se detallará en futuros artículos, pero aquí tenemos un sencillo ejemplo de como posicionar el marcador en nuestra posición actual. A continuación todo el codigo javascript necesario:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
function localize() { /* Si se puede obtener la localización */ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(mapa,error); } /* Si el navegador no soporta la recuperación de la geolocalización */ else { alert('¡Oops! Tu navegador no soporta geolocalización.'); } } function mapa(pos) { /* Obtenemos los parámetros de la API de geolocalización HTML*/ var latitud = pos.coords.latitude; var longitud = pos.coords.longitude; var precision = pos.coords.accuracy; /* A través del DOM obtenemos el div que va a contener el mapa */ var contenedor = document.getElementById("map") /* Posicionamos un punto en el mapa con las coordenadas que nos ha proporcionado la API*/ var centro = new google.maps.LatLng(latitud,longitud); /* Definimos las propiedades del mapa */ var propiedades = { zoom: 15, center: centro, mapTypeId: google.maps.MapTypeId.ROADMAP }; /* Creamos el mapa pasandole el div que lo va a contener y las diferentes propiedades*/ var map = new google.maps.Map(contenedor, propiedades); /* Un servicio que proporciona la API de GM es colocar marcadores sobre el mapa */ var marcador = new google.maps.Marker({ position: centro, map: map, title: "Tu localizacion" }); } /* Gestion de errores */ function error(errorCode) { if(errorCode.code == 1) alert("No has permitido buscar tu localizacion") else if (errorCode.code==2) alert("Posicion no disponible") else alert("Ha ocurrido un error") } |
Como podemos ver, con una gran facilidad hemos incorporado un mapa en nuestra web posicionándonos en nuestra posición actual. Esta API tiene multitud de servicios, como el trazado de rutas, marcadores, selección de áreas con las que trabajaremos en futuros artículos
El código fuente completo se puedes obtener en mi github
