SIBW - TAC - Trabajo - Daniel Díaz Salas

API DE GOOGLE MAPS
Daniel Díaz Salas
Introducción
Este trabajo trata sobre la API de Google Maps, de su relación con los Sistemas de Información Basados en
Web, y de cómo empezar a usarla, para que cualquiera que lea este documento pueda empezar a
desarrollar sus aplicaciones.
Google Maps y los Sistemas de Información Basados en Web
La relación que tiene Google Maps con los SIBW es obvia. Cualquier cosa que sea susceptible de ser
representada en un mapa podrá usarse en esta API. Lo cual nos hace recordar una propiedad que se
estudiaba en las clases de física: todo objeto ocupa un lugar en el espacio. ¿Y qué hace un mapa sino
representar 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 Maps
Esta 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 clave
Todas las aplicaciones del API de Google Maps deben cargar el API de Google Maps mediante una clave
de API. Utilizar una clave de API permite controlar cómo utiliza la aplicación el API de Google Maps y
asegurarnos de que Google puede ponerse en contacto con el desarrollador con respecto a la aplicación si
fuese 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 con
una cuenta de Google
2. 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á disponible
desde la página de acceso al API, en la sección de acceso al API sencilla. Las aplicaciones del API de
Google Maps utilizan la clave para aplicaciones del navegador.
Segundo paso: Hola Mundo de Google Maps
La manera más fácil de iniciar el aprendizaje del API de Google Maps es observar un sencillo ejemplo. La
siguiente 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"

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 = new
google.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 body
Estas 6 cosas se han de tener en cuenta siempre que trabajemos con la API de Google Maps. Por ello, se
explican con más detalle:
Cómo declarar tu aplicación como HTML5
Se recomienda que se declare un DOCTYPE verdadero en la aplicación web. En los ejemplos se han
declarado las aplicaciones como HTML5 mediante el sencillo DOCTYPE HTML5, tal y como se muestra a
continuació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én
está diseñado para ajustarse de la mejor manera; así, los navegadores que no lo entiendan lo ignorarán y
utilizará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 el
modo estándar. En concreto, todos los tamaños basados en porcentajes deben heredarse de los elementos
de bloque principales, y si cualquiera de estos antecesores no puede especificar un tamaño, se supondrá un
tamañ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>

Esta declaración de CSS indica que el contenedor del mapa <div> (denominado map_canvas) debe ocupar
el 100% de la altura del cuerpo de HTML. Hay que tener en cuenta que se debe declarar de forma
específica estos porcentajes tanto para <body> como para <html>.
Cómo cargar el API de Google Maps
<html>
<head>
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 los
símbolos y las definiciones que se necesitan para utilizar el API de Google Maps. La etiqueta script es
obligatoria.
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, un
localizador GPS) para determinar la ubicación del usuario. En este ejemplo se ha dejado el parámetro como
la variable set_to_true_or_false para hacer hincapié en que se debe definir este valor en true o false de
forma explícita.
HTTPS
Si la aplicación es una aplicación HTTPS, es posible que se quiera cargar el API de JavaScript de Google
Maps 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 para
evitar que aparezcan advertencias de seguridad en la mayoría de los navegadores, y se recomienda para
las aplicaciones que incluyen datos importantes de los usuarios en las solicitudes (por ejemplo, su
ubicación).
Cómo cargar el API de forma asíncrona
Se recomienda que se cargue el código JavaScript del API de Google Maps después de que la página haya
terminado de cargarse o en el momento. Para ello, se puede insertar una etiqueta propia <script> en
respuesta a un evento window.onload o a una llamada de función. No obstante, también se debe indicar a la
secuencia de comandos de inicialización del API de JavaScript de Google Maps que retrase la ejecución del
código de la aplicación hasta que el código del API de JavaScript de Google Maps se haya cargado por
completo. Para ello, se puede utilizar el parámetro callback, que utiliza como argumento la función que se
debe 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 Google
Maps una vez que se haya cargado por completo la página (mediante window.onload) y que se incluya el
API de JavaScript de Google Maps en una etiqueta <script> dentro de la página. También se puede hacer
que el API no ejecute la función initialize() hasta que se haya cargado por completo incluyendo
callback=initialize en la secuencia de comandos de inicialización del API de Google Maps:
function initialize() {
var mapOptions = {
zoom: 8,
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}

Tipos de mapas
También hay que establecer expresamente un tipo de mapa inicial en este momento.
Se 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 elementos
del mapa más destacados (carreteras, nombres de ciudades, etc.).
• TERRAIN muestra mosaicos de relieve físico para indicar las elevaciones del terreno y las fuentes
de 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 único
mapa 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 para
inicializar 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ágenes
y secuencias de comandos externas se reciben y se incorporan al objeto document. Para garantizar que el
mapa se añada a la página cuando se cargue por completo, solo se ejecuta la función que crea el objeto
Map cuando el elemento <body> de la página HTML ha recibido un evento onload. De este modo, se evita
un comportamiento impredecible y se obtiene más control acerca del modo y del momento en que se dibuja
el mapa.
El atributo onload de la etiqueta body es un ejemplo de un controlador de eventos. El API de JavaScript de
Google Maps también proporciona varios eventos que se pueden controlar para determinar cambios de
estado
Codificación geográfica
La 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 las
direcciones de forma dinámica a partir de los datos introducidos por el usuario. Estas solicitudes son
limitadas para evitar un abuso del servicio.
Solicitudes de codificación geográfica
El acceso al servicio de asignación de identificadores geográficos tiene lugar de forma asíncrona, dado que
el API de Google Maps necesita realizar una llamada a un servidor externo. Por ese motivo, se debe incluir
un método de devolución de llamada para que se ejecute al completar la solicitud. Este método de
devolución de llamada procesará los resultados. Hay que tener en cuenta que el geocoder puede devolver
más de un resultado.
Hay que acceder al servicio de asignación de identificadores geográficos del API de Google Maps desde el
código a través del objeto google.maps.Geocoder. El método Geocoder.geocode() inicia la solicitud al
servicio de asignación de identificadores geográficos y transmite un objeto literal GeocodeRequest que
contiene los términos de entrada y un método de devolución de llamada que se ejecutará al recibir la
respuesta

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ón
interpretable por humanos más cercana.
• bounds (opcional): son los límites de latitud y de longitud (LatLngBounds) dentro de los que se
quiere 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 lenguaje
IANA. En la mayoría de los casos, estas etiquetas se asignan directamente a valores de dos
caracteres 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 inversa
Respuestas de codificación geográfica
Para el servicio de asignación de identificadores geográficos se necesita un método de devolución de
llamada que se ejecute al recuperar los resultados del geocoder. Esta devolución de llamada debe transmitir
dos parámetros que alojen resultados (results) y un código de estado (status), en ese orden. Puesto que el
geocoder puede devolver más de una entrada, el objeto literal GeocoderResults es un conjunto.
Resultados de codificación geográfica
El objeto literal GeocoderResults representa un único resultado de codificación geográfica y presenta la
siguiente forma:
results[]: {
types[]: string,
formatted_address: string,
address_components[]: {
short_name: string,
long_name: string,
types[]: string
},
geometry: {
location: LatLng,
location_type: GeocoderLocationType
viewport: LatLngBounds,
bounds: LatLngBounds
}
}
Estos campos significan los siguiente:
• types[] es un conjunto que indica de qué tipo son los resultados obtenidos. Este conjunto incluye
una o más etiquetas que identifican el tipo de elemento que se ha obtenido en el resultado. Por
ejemplo, un código geográfico de "Chicago" devuelve "locality", lo que indica que "Chicago" es una
ciudad y además devuelve "political", lo que significa que es una entidad política.

• formatted_address es una cadena que contiene la dirección interpretable por humanos de la
ubicación. Esta dirección suele corresponder con la "dirección postal", que a veces difiere de un
país a otro. Esta suele estar formada por uno o varios componentes de la dirección. Por ejemplo, la
dirección "111 8th Avenue, New York, NY" contiene componentes independientes para "111 8th
Avenue" (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 en
cuenta 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, se
admiten los siguientes valores:
▪ google.maps.GeocoderLocationType.ROOFTOP indica que el resultado obtenido refleja un
código geográfico preciso.
▪ google.maps.GeocoderLocationType.RANGE_INTERPOLATED indica que el resultado
obtenido refleja una aproximación (normalmente en una carretera) interpolada entre dos
puntos precisos (por ejemplo, intersecciones). Los resultados interpolados se suelen
obtener cuando los códigos geográficos de la parte superior no están disponibles para una
dirección postal.
▪ google.maps.GeocoderLocationType.GEOMETRIC_CENTER indica que el resultado
obtenido 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 es
aproximado.
◦ 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 idioma
especificado al cargar el código JavaScript del API mediante el parámetro language.
Códigos de estado
El código status puede devolver uno de los siguientes valores:
• google.maps.GeocoderStatus.OK indica que la codificación geográfica se ha realizado
correctamente.
• google.maps.GeocoderStatus.ZERO_RESULTS indica que la codificación geográfica se ha
realizado correctamente pero no ha devuelto ningún resultado. Esto puede ocurrir si en la
codificación geográfica se incluye una dirección (address) inexistente o un valor latng en una
ubicación remota.
• google.maps.GeocoderStatus.OVER_QUERY_LIMIT indica que se ha excedido el cupo de
solicitudes.
• google.maps.GeocoderStatus.REQUEST_DENIED indica que se ha denegado la solicitud por algún
motivo.
• google.maps.GeocoderStatus.INVALID_REQUEST normalmente indica que no se ha especificado
la solicitud (address o latLng).

Bibliotecas
El código JavaScript del API de Google Maps se carga a través de una URL de inicialización con el formato
http://maps.googleapis.com/maps/api/js. Al enviar esta solicitud de inicialización, se cargan todos los
símbolos y los objetos JavaScript que se utilizarán en el API de Google Maps. Algunos recursos del API de
Google Maps también se encuentran disponibles a través de bibliotecas independientes que no se cargan a
menos que se soliciten explícitamente. La distribución de componentes complementarios en bibliotecas
permite que el API principal se cargue (y se analice) rápidamente, de forma que la única carga de trabajo
adicional 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 con
el nombre de esas bibliotecas en la solicitud de inicialización. Si se necesita indicar varias bibliotecas, se
deben separar con comas. Una vez que se hayan cargado las bibliotecas, se podrá acceder a ellas a través
del 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 de
texto 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 la
distancia y el área) en la superficie terrestre.
• panoramio: contiene funciones que permiten añadir capas de fotos de Panoramio a las aplicaciones
creadas con el API de Google Maps.
• places: permite que una aplicación busque sitios como establecimientos, ubicaciones geográficas o
puntos de interés destacados dentro de un área definida.
• visualization: proporciona representaciones visuales de datos de mapa de calor e información
demográfica de Estados Unidos. Para obtener más información sobre mapas de calor, consulta la
documentació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 del
API de JavaScript de Google Maps:
libraries=geometry&sensor=true_or_false">
</script>
Si se quieren solicitar varias bibliotecas, hay que separarlas con comas:
libraries=geometry,places&sensor=true_or_false">
</script>

Referencias:
https://developers.google.com/maps/documentation/javascript/tutorial?hl=es
https://developers.google.com/maps/documentation/javascript/geocoding?hl=es
https://developers.google.com/maps/documentation/javascript/libraries?hl=es

SIBW - TAC - Trabajo - Daniel Díaz Salas

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a SIBW - TAC - Trabajo - Daniel Díaz Salas

Semelhante a SIBW - TAC - Trabajo - Daniel Díaz Salas (20)

SIBW - TAC - Trabajo - Daniel Díaz Salas