Your SlideShare is downloading. ×
SIBW - TAC - Trabajo - Daniel Díaz Salas
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SIBW - TAC - Trabajo - Daniel Díaz Salas

201
views

Published on

Trabajo sobre la API de Google Maps para la asignatura de SIBW de 3º de la especialidad de Ingeniería del Software de la UGR

Trabajo sobre la API de Google Maps para la asignatura de SIBW de 3º de la especialidad de Ingeniería del Software de la UGR


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
201
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. API DE GOOGLE MAPSDaniel Díaz SalasIntroducciónEste trabajo trata sobre la API de Google Maps, de su relación con los Sistemas de Información Basados enWeb, y de cómo empezar a usarla, para que cualquiera que lea este documento pueda empezar adesarrollar sus aplicaciones.Google Maps y los Sistemas de Información Basados en WebLa relación que tiene Google Maps con los SIBW es obvia. Cualquier cosa que sea susceptible de serrepresentada en un mapa podrá usarse en esta API. Lo cual nos hace recordar una propiedad que seestudiaba en las clases de física: todo objeto ocupa un lugar en el espacio. ¿Y qué hace un mapa sinorepresentar el lugar que ocupan los objetos en el espacio?Es pues bastante obvio pensar que se puede representar cualquier cosa que no sea abstracta con esta API.Ya nos podemos imaginar el potencial que podemos sacar con esta herramienta.La API de Google MapsEsta API va dirigida a programadores con experiencia en JavaScript y programación orientada a objetos,que también estén familiarizados con Google Maps desde el punto de vista del usuario.Primer paso: obtener una claveTodas las aplicaciones del API de Google Maps deben cargar el API de Google Maps mediante una clavede API. Utilizar una clave de API permite controlar cómo utiliza la aplicación el API de Google Maps yasegurarnos de que Google puede ponerse en contacto con el desarrollador con respecto a la aplicación sifuese necesario.Para crear una clave hay que seguir 4 pasos:1. Acceded a la página de la consola de las API (https://code.google.com/apis/console) e iniciar sesión conuna cuenta de Google2. Hacer clic en el enlace de servicios en el menú de la izquierda.3. Activar el servicio de la versión 3 del API de Google Maps.4. Hacer clic en el enlace de acceso al API en el menú de la izquierda. la clave de API está disponibledesde la página de acceso al API, en la sección de acceso al API sencilla. Las aplicaciones del API deGoogle Maps utilizan la clave para aplicaciones del navegador.Segundo paso: Hola Mundo de Google MapsLa manera más fácil de iniciar el aprendizaje del API de Google Maps es observar un sencillo ejemplo. Lasiguiente página web muestra un mapa centrado en Sídney, Nueva Gales del Sur, Australia:<!DOCTYPE html><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">html { height: 100% }body { height: 100%; margin: 0; padding: 0 }#map_canvas { height: 100% }</style><script type="text/javascript"
  • 2. src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script><script type="text/javascript">function initialize() {var mapOptions = {center: new google.maps.LatLng(-34.397, 150.644),zoom: 8,mapTypeId: google.maps.MapTypeId.ROADMAP};var map = newgoogle.maps.Map(document.getElementById("map_canvas"),mapOptions);}</script></head><body onload="initialize()"><div id="map_canvas" style="width:100%; height:100%"></div></body></html>Hay algunas cosas que se deben de tener en cuenta sobre este código:1. Declaramos la aplicación como HTML5 mediante la declaración <!DOCTYPE html>.2. Incluimos el código JavaScript del API de Google Maps mediante la etiqueta script.3. Creamos un elemento div denominado "map_canvas" que aloja el mapa.4. Creamos un objeto JavaScript literal para alojar una serie de propiedades de mapa.5. Escribimos una función JavaScript para crear un objeto de mapa.6. Inicializamos el objeto de mapa desde el evento onload de la etiqueta bodyEstas 6 cosas se han de tener en cuenta siempre que trabajemos con la API de Google Maps. Por ello, seexplican con más detalle:Cómo declarar tu aplicación como HTML5Se recomienda que se declare un DOCTYPE verdadero en la aplicación web. En los ejemplos se handeclarado las aplicaciones como HTML5 mediante el sencillo DOCTYPE HTML5, tal y como se muestra acontinuación:<!DOCTYPE html>Los navegadores más habituales mostrarán contenido declarado con este DOCTYPE en "modo estándar",lo que significa que la aplicación deberá ser más compatible con los navegadores. El DOCTYPE tambiénestá diseñado para ajustarse de la mejor manera; así, los navegadores que no lo entiendan lo ignorarán yutilizarán el "modo chapucero" para mostrar el contenido.Hay que tener en cuenta que algunas de las CSS que funcionan en el modo chapucero no son válidas en elmodo estándar. En concreto, todos los tamaños basados en porcentajes deben heredarse de los elementosde bloque principales, y si cualquiera de estos antecesores no puede especificar un tamaño, se supondrá untamaño de 0 x 0 píxeles. Por esta razón, hay que incluir la siguiente declaración <style>:<style type="text/css">html { height: 100% }body { height: 100%; margin: 0; padding: 0 }#map_canvas { height: 100% }</style>
  • 3. Esta declaración de CSS indica que el contenedor del mapa <div> (denominado map_canvas) debe ocuparel 100% de la altura del cuerpo de HTML. Hay que tener en cuenta que se debe declarar de formaespecífica estos porcentajes tanto para <body> como para <html>.Cómo cargar el API de Google Maps<html><head><script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script>La URL incluida en la etiqueta script indica la ubicación de un archivo JavaScript que carga todos lossímbolos y las definiciones que se necesitan para utilizar el API de Google Maps. La etiqueta script esobligatoria.El parámetro key incluye la clave de API de la aplicación.El parámetro sensor de la URL es obligatorio e indica si esta aplicación utiliza un sensor (por ejemplo, unlocalizador GPS) para determinar la ubicación del usuario. En este ejemplo se ha dejado el parámetro comola variable set_to_true_or_false para hacer hincapié en que se debe definir este valor en true o false deforma explícita.HTTPSSi la aplicación es una aplicación HTTPS, es posible que se quiera cargar el API de JavaScript de GoogleMaps a través de HTTPS:<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"type="text/javascript"></script>El uso del protocolo HTTPS para cargar el API de Google Maps es necesario en las aplicaciones SSL paraevitar que aparezcan advertencias de seguridad en la mayoría de los navegadores, y se recomienda paralas aplicaciones que incluyen datos importantes de los usuarios en las solicitudes (por ejemplo, suubicación).Cómo cargar el API de forma asíncronaSe recomienda que se cargue el código JavaScript del API de Google Maps después de que la página hayaterminado de cargarse o en el momento. Para ello, se puede insertar una etiqueta propia <script> enrespuesta a un evento window.onload o a una llamada de función. No obstante, también se debe indicar a lasecuencia de comandos de inicialización del API de JavaScript de Google Maps que retrase la ejecución delcódigo de la aplicación hasta que el código del API de JavaScript de Google Maps se haya cargado porcompleto. Para ello, se puede utilizar el parámetro callback, que utiliza como argumento la función que sedebe ejecutar cuando finaliza la carga del API.A continuación se muestra un fragmento de código que permite que la aplicación cargue el API de GoogleMaps una vez que se haya cargado por completo la página (mediante window.onload) y que se incluya elAPI de JavaScript de Google Maps en una etiqueta <script> dentro de la página. También se puede hacerque el API no ejecute la función initialize() hasta que se haya cargado por completo incluyendocallback=initialize en la secuencia de comandos de inicialización del API de Google Maps:function initialize() {var mapOptions = {zoom: 8,center: new google.maps.LatLng(-34.397, 150.644),mapTypeId: google.maps.MapTypeId.ROADMAP}var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);}
  • 4. function loadScript() {var script = document.createElement("script");script.type = "text/javascript";script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";document.body.appendChild(script);}window.onload = loadScript;Elementos DOM de mapasPara que el mapa aparezca en una página web, se debe reservar un lugar para él. Normalmente, se hacemediante la creación de un elemento div con nombre y la obtención de una referencia a este elemento en elmodelo de objetos de documento (DOM) del navegador.<div id="map_canvas" style="width: 100%; height: 100%"></div>En el ejemplo anterior, se ha definido un objeto <div> denominado "map_canvas" y se ha establecido sutamaño mediante atributos de estilo. Hay que tener cuenta que este tamaño se establece en "100%", lo queamplía el mapa hasta que ocupa toda la pantalla del dispositivo móvil. Es posible que sea necesario ajustarestos valores según el desplazamiento y el tamaño de la pantalla del navegador. Hay que tener en cuentaque el mapa siempre adoptará el tamaño del elemento en el que esté contenido, por lo que siempre debesestablecer un tamaño para el elemento <div> de forma explícita.Opciones de mapasvar mapOptions = {center: new google.maps.LatLng(-34.397, 150.644),zoom: 8,mapTypeId: google.maps.MapTypeId.ROADMAP};Antes de inicializar un mapa, hay que crear un objeto Map options que contenga las variables deinicialización correspondientes. Este objeto no se construye, sino que se crea como un objeto literal.var mapOptions = {};Latitudes y longitudesComo queremos center el mapa en un punto específico, creamos un objeto LatLng para mantener estaubicación especificando las coordenadas de ubicación en el orden {latitud, longitud}:center = new google.maps.LatLng(-34.397, 150.644)El proceso de convertir una dirección en un punto geográfico se conoce como codificación geográfica, elcual se describirá más adelante.Niveles de zoomLa propiedad zoom especifica la resolución inicial con la que se mostrará un mapa, donde un zoom de 0 secorresponde con un mapa de la Tierra totalmente alejado y los niveles de zoom acercan el mapa con unaresolución más elevada.zoom: 8Para ofrecer un mapa de todo el planeta como una única imagen, es necesario un mapa muy grande o unmapa pequeño con una resolución muy baja. Por consiguiente, las imágenes de mapa en Google Maps y elAPI de Google Maps se dividen en "mosaicos" de mapas y "niveles de zoom". A niveles bajos de zoom, unconjunto pequeño de mosaicos de mapas cubre una superficie amplia; a niveles de zoom más elevados, losmosaicos tienen una resolución mayor y cubren una superficie más pequeña
  • 5. Tipos de mapasTambién hay que establecer expresamente un tipo de mapa inicial en este momento.mapTypeId: google.maps.MapTypeId.ROADMAPSe admiten los siguientes tipos de mapas:• ROADMAP, que muestra los mosaicos normales en 2D predeterminados de Google Maps.• SATELLITE muestra imágenes de satélite.• HYBRID muestra una mezcla de mosaicos fotográficos y una capa de mosaicos para los elementosdel mapa más destacados (carreteras, nombres de ciudades, etc.).• TERRAIN muestra mosaicos de relieve físico para indicar las elevaciones del terreno y las fuentesde agua (montañas, ríos, etc.).El objeto “Map”var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);La clase de JavaScript que representa a los mapas es Map. Cada objeto de esta clase define un únicomapa en una página. Se crea una nueva instancia de esta clase mediante el operador new de JavaScript.Este código permite definir una variable (denominada map) y asignar dicha variable a un nuevo objeto Map,además de transmitir opciones definidas en el objeto mapOptions literal. Estas opciones se utilizarán parainicializar las propiedades del mapa.Cómo cargar el mapa<body onload="initialize()">Mientras se procesa una página HTML, se crea el modelo de objetos de documentos (DOM) y las imágenesy secuencias de comandos externas se reciben y se incorporan al objeto document. Para garantizar que elmapa se añada a la página cuando se cargue por completo, solo se ejecuta la función que crea el objetoMap cuando el elemento <body> de la página HTML ha recibido un evento onload. De este modo, se evitaun comportamiento impredecible y se obtiene más control acerca del modo y del momento en que se dibujael mapa.El atributo onload de la etiqueta body es un ejemplo de un controlador de eventos. El API de JavaScript deGoogle Maps también proporciona varios eventos que se pueden controlar para determinar cambios deestadoCodificación geográficaLa codificación geográfica es el proceso de transformar direcciones (como "1600 Amphitheatre Parkway,Mountain View, CA") en coordenadas geográficas (como 37.423021 de latitud y -122.083739 de longitud),que se pueden utilizar para colocar marcadores o situar el mapa.El API de Google Maps proporciona una clase geocoder que permite codificar geográficamente lasdirecciones de forma dinámica a partir de los datos introducidos por el usuario. Estas solicitudes sonlimitadas para evitar un abuso del servicio.Solicitudes de codificación geográficaEl acceso al servicio de asignación de identificadores geográficos tiene lugar de forma asíncrona, dado queel API de Google Maps necesita realizar una llamada a un servidor externo. Por ese motivo, se debe incluirun método de devolución de llamada para que se ejecute al completar la solicitud. Este método dedevolución de llamada procesará los resultados. Hay que tener en cuenta que el geocoder puede devolvermás de un resultado.Hay que acceder al servicio de asignación de identificadores geográficos del API de Google Maps desde elcódigo a través del objeto google.maps.Geocoder. El método Geocoder.geocode() inicia la solicitud alservicio de asignación de identificadores geográficos y transmite un objeto literal GeocodeRequest quecontiene los términos de entrada y un método de devolución de llamada que se ejecutará al recibir larespuesta
  • 6. El objeto literal GeocodeRequest contiene los siguientes campos:{address: string,latLng: LatLng,bounds: LatLngBounds,region: string}• address (obligatorio): es la dirección que se quiere codificar de forma geográfica.• latLng (obligatorio): es la latitud y la longitud (LatLng) para las que se quiere obtener la direccióninterpretable por humanos más cercana.• bounds (opcional): son los límites de latitud y de longitud (LatLngBounds) dentro de los que sequiere predeterminar los resultados de codificación geográfica con mayor importancia.• region (opcional): es el código de región, especificado como una subetiqueta region del lenguajeIANA. En la mayoría de los casos, estas etiquetas se asignan directamente a valores de doscaracteres ccTLD ("dominio de nivel superior") ya conocidos.Para la búsqueda se puedes incluir un campo address o un campo latLng (si se transmite un campo latLng,el geocoder realizará el proceso conocido como codificación geográfica inversaRespuestas de codificación geográficaPara el servicio de asignación de identificadores geográficos se necesita un método de devolución dellamada que se ejecute al recuperar los resultados del geocoder. Esta devolución de llamada debe transmitirdos parámetros que alojen resultados (results) y un código de estado (status), en ese orden. Puesto que elgeocoder puede devolver más de una entrada, el objeto literal GeocoderResults es un conjunto.Resultados de codificación geográficaEl objeto literal GeocoderResults representa un único resultado de codificación geográfica y presenta lasiguiente forma:results[]: {types[]: string,formatted_address: string,address_components[]: {short_name: string,long_name: string,types[]: string},geometry: {location: LatLng,location_type: GeocoderLocationTypeviewport: LatLngBounds,bounds: LatLngBounds}}Estos campos significan los siguiente:• types[] es un conjunto que indica de qué tipo son los resultados obtenidos. Este conjunto incluyeuna o más etiquetas que identifican el tipo de elemento que se ha obtenido en el resultado. Porejemplo, un código geográfico de "Chicago" devuelve "locality", lo que indica que "Chicago" es unaciudad y además devuelve "political", lo que significa que es una entidad política.
  • 7. • formatted_address es una cadena que contiene la dirección interpretable por humanos de laubicación. Esta dirección suele corresponder con la "dirección postal", que a veces difiere de unpaís a otro. Esta suele estar formada por uno o varios componentes de la dirección. Por ejemplo, ladirección "111 8th Avenue, New York, NY" contiene componentes independientes para "111 8thAvenue" (una dirección postal), "New York" (la ciudad) y "NY" (el estado de EE.UU.).• address_component[] es un conjunto que incluye los diferentes componentes de la dirección.• geometry contiene la siguiente información:◦ location contiene el valor de latitud y longitud codificado de forma geográfica. Hay que tener encuenta que este valor se devuelve como un objeto LatLng, no como una cadena con formato.◦ location_type almacena datos adicionales sobre la ubicación especificada. Actualmente, seadmiten los siguientes valores:▪ google.maps.GeocoderLocationType.ROOFTOP indica que el resultado obtenido refleja uncódigo geográfico preciso.▪ google.maps.GeocoderLocationType.RANGE_INTERPOLATED indica que el resultadoobtenido refleja una aproximación (normalmente en una carretera) interpolada entre dospuntos precisos (por ejemplo, intersecciones). Los resultados interpolados se suelenobtener cuando los códigos geográficos de la parte superior no están disponibles para unadirección postal.▪ google.maps.GeocoderLocationType.GEOMETRIC_CENTER indica que el resultadoobtenido corresponde al centro geométrico de un resultado del tipo polilínea (por ejemplo,una calle) o polígono (una región).▪ google.maps.GeocoderLocationType.APPROXIMATE indica que el resultado obtenido esaproximado.◦ viewport almacena la ventana gráfica recomendada para el resultado obtenido.◦ bounds (se devuelve de forma opcional) almacena los límites de latitud y de longitud(LatLngBounds) que pueden contener por completo el resultado obtenido.El geocoder devuelve las direcciones con la configuración de idioma preferida del navegador, o en el idiomaespecificado al cargar el código JavaScript del API mediante el parámetro language.Códigos de estadoEl código status puede devolver uno de los siguientes valores:• google.maps.GeocoderStatus.OK indica que la codificación geográfica se ha realizadocorrectamente.• google.maps.GeocoderStatus.ZERO_RESULTS indica que la codificación geográfica se harealizado correctamente pero no ha devuelto ningún resultado. Esto puede ocurrir si en lacodificación geográfica se incluye una dirección (address) inexistente o un valor latng en unaubicación remota.• google.maps.GeocoderStatus.OVER_QUERY_LIMIT indica que se ha excedido el cupo desolicitudes.• google.maps.GeocoderStatus.REQUEST_DENIED indica que se ha denegado la solicitud por algúnmotivo.• google.maps.GeocoderStatus.INVALID_REQUEST normalmente indica que no se ha especificadola solicitud (address o latLng).
  • 8. BibliotecasEl código JavaScript del API de Google Maps se carga a través de una URL de inicialización con el formatohttp://maps.googleapis.com/maps/api/js. Al enviar esta solicitud de inicialización, se cargan todos lossímbolos y los objetos JavaScript que se utilizarán en el API de Google Maps. Algunos recursos del API deGoogle Maps también se encuentran disponibles a través de bibliotecas independientes que no se cargan amenos que se soliciten explícitamente. La distribución de componentes complementarios en bibliotecaspermite que el API principal se cargue (y se analice) rápidamente, de forma que la única carga de trabajoadicional que debe asumir el desarrollador es la de cargar y analizar las bibliotecas que pueda necesitar.Para especificar las bibliotecas adicionales que se quiera cargar, hay que incluir un parámetro libraries conel nombre de esas bibliotecas en la solicitud de inicialización. Si se necesita indicar varias bibliotecas, sedeben separar con comas. Una vez que se hayan cargado las bibliotecas, se podrá acceder a ellas a travésdel espacio de nombre google.maps.libraryName.A continuación se indican las bibliotecas que se encuentran disponibles actualmente:• adsense: permite que la aplicación desarrollada con el API de Google Maps incluya anuncios detexto contextuales para poder obtener ingresos con los anuncios mostrados a los usuarios.• drawing: proporciona una interfaz gráfica que permite que los usuarios incluyan polígonos,rectángulos, polilíneas, círculos y marcadores en el mapa.• geometry: incluye funciones de utilidades para el cálculo de valores geométricos escalares (como ladistancia y el área) en la superficie terrestre.• panoramio: contiene funciones que permiten añadir capas de fotos de Panoramio a las aplicacionescreadas con el API de Google Maps.• places: permite que una aplicación busque sitios como establecimientos, ubicaciones geográficas opuntos de interés destacados dentro de un área definida.• visualization: proporciona representaciones visuales de datos de mapa de calor e informacióndemográfica de Estados Unidos. Para obtener más información sobre mapas de calor, consulta ladocumentación sobre mapas de calor.• weather contiene funciones para añadir previsiones meteorológicas e imágenes de nubes al mapa.En la siguiente solicitud de inicialización se muestra cómo solicitar la biblioteca google.maps.geometry delAPI de JavaScript de Google Maps:<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true_or_false"></script>Si se quieren solicitar varias bibliotecas, hay que separarlas con comas:<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?libraries=geometry,places&sensor=true_or_false"></script>
  • 9. Referencias:https://developers.google.com/maps/documentation/javascript/tutorial?hl=eshttps://developers.google.com/maps/documentation/javascript/geocoding?hl=eshttps://developers.google.com/maps/documentation/javascript/libraries?hl=es

×