GOOGLE MAPS y APIs
Instituto Tecnolgico de Tijuana, Departamento de Sistemas y Computacin
Tijuana, Baja California, Mxico
Esqueda lvarez Carmen Denisse 13211435
carmen.esqueda@tectijuana.edu.mx
1. INTRODUCCION
Google Maps fue desarrollado originalmente por dos
hermanos Daneses, Lars y Jens Rasmussen, co-
fundadores de Where 2 Technologies una empresa
dedicada a la creacin de soluciones de mapeo. La
empresa fue adquirida por Google en octubre de 2004,
y los dos hermanos luego crearon Google Maps
(tambin son los que estn detrs de Google Wave).
Google Maps proporciona direcciones, informacin de
ubicacin y cualquier otro tipo de informacin
proporcionada por la API de Google Maps en tu
aplicacin web. Actualmente se tiene la ltima versin
de Google Maps API V3.
Las API web nativas de Google son utilizadas para
visualizar mapas y acceder a funciones completas de
asignacin, como indicaciones precisas y Street View.
[1]
2. GOOGLE MAPS
2.1. QUE ES GOOGLE MAPS
Google Maps es un servidor de aplicaciones de mapas
en la web que pertenece a Alphabet Inc. Ofrece
imgenes de mapas desplazables, as como fotografas
por satlite del mundo e incluso la ruta entre diferentes
ubicaciones o imgenes a pie de calle con Google Street
View.
Existe una variante a nivel entorno de escritorio
llamada Google Earth que ofrece Alphabet Inc. tambin
de forma gratuita. En 2014, los documentos filtrados
por Edward Snowden revelaron que Google Maps es
parte y vctima del entramado de vigilancia mundial
operado por varias agencias de inteligencia occidentales
y empresas tecnolgicas.
2.2. CARACTERISTICAS DE GOOGLE MAPS
2.2.1. Bsicas
Google Maps ofrece la capacidad de realizar
acercamientos y alejamientos para mostrar el
Garca Inzunza Cristian Al 13211488
Ali.g.inzunza@gmail.com
mapa. El usuario puede controlar el mapa con el mouse
o las teclas de direccin para moverse a la ubicacin
que se desee. Para permitir un movimiento ms rpido,
las teclas "+" y " pueden ser usadas para controlar el
nivel de zoom. Los usuarios pueden ingresar una N
direccin, una interseccin o un rea en general para
buscar en el mapa.
Como otros servicios de mapa, Google Maps permite
la creacin de pasos para llegar a alguna direccin.
Esto permite al usuario crear una lista paso a paso para
saber cmo llegar a su destino, calculando el tiempo
necesario y la distancia recorrida entre las ubicaciones.
Los desarrolladores pueden aplicar nuevas formas de
ver el mundo gracias a estas APIS.
2.2.2. Coordenadas
Las coordenadas estn expresadas usando nmeros
decimales separados por coma. La latitud siempre
precede la longitud. La latitud es positiva si va
despus del punto mostrado en el mapa y negativo
si va antes. La longitud es positiva si va arriba del
punto y negativa si va debajo.
Hay varias formas de obtenerlas, una vez que
hemos localizado el lugar que interesa:
Se hace clic en el icono "enlazar" y los valores
que hay a continuacin de ?q= son las
coordenadas.
Hacer clic con el botn derecho del ratn en el
punto deseado en el mapa para que aparezca un
men con opciones. En el men, se ha de
selccionar "Qu hay aqu?" y hacer clic en la
flecha de color verde para obtener las
coordenadas.
Poner el siguiente cdigo en la barra de
direcciones del navegador web
javascript:void(prompt(,
gApplication.getMap().getCenter()))
2.2.3. Avanzadas
En abril de 2005, Google aadi un Ride Finder (en
espaol, indicador de vehculo), en el cual una
persona puede ubicar un taxi o un transporte
pblico en una gran ciudad en tiempo real. La
persona debe hacer clic en la barra de Update
Position (en espaol, actualizar posicin) para
encontrar la nueva ubicacin del auto.
En junio de 2005, los mapas de carreteras de los
Estados Unidos, Puerto Rico, Canad y el Reino
Unido fueron integrados en Google Maps.
A mediados de julio de 2005, Google comienza la
versin japonesa de Google Maps y Google Local.
2.2.4. Imgenes por satlite
En abril de 2005, se crea una vista alternativa a la
que se mostraba por el satlite. El mayor proveedor
de imgenes satelitales de Google Maps es
DigitalGlobe, quien provee la mayor parte de sus
imgenes del satlite QuickBird.
En junio de 2005, las imgenes de alta resolucin (o
a la mxima ampliacin) ya estaban disponibles
para la mayor parte de Canad y Estados Unidos
(incluyendo los estados de Hawaii y Alaska.
Adems abarca otros pases en forma parcial, como
Francia, Irlanda, Italia, Irak, Japn, Bahamas,
Kuwait, Mxico, Holanda, etc.
Sin embargo, algunas reas fueron oscurecidas por
motivos de seguridad.
Para el resto del planeta las imgenes se encuentran
disponible en baja resolucin, excepto para los
polos.
No todas las fotos mostradas son de satlites;
algunas son Ortofotos de ciudades tomadas por
aviones que vuelan a bastante altura (sobre los 10
000 metros).
2.2.5. Multivistas
El 22 de julio de 2005, Google lanza una vista dual
de su Google Maps. Esta vista combina el par y la
vista satlital con mapas ilustrados y los nombres
de calles en las imgenes del mundo real. Esto hace
ms fcil encontrar rutas entre dos puntos. [2]
2.3. GOOGLE MAPS API
La API de Google Maps permite incorporar Google
Maps en pginas web de desarrolladores externos,
utilizando una interfaz JavaScript sencilla o una interfaz
de Flash. Est diseado para funcionar tanto en
dispositivos mviles como en aplicaciones de
navegador de escritorio tradicionales. La API incluye
localizacin de idiomas para ms de 50 idiomas,
localizacin de regiones y geocodificacin, y tiene
mecanismos para desarrolladores de empresas que
desean utilizar la API de Google Maps dentro de una
intranet. Los clientes API de Google Maps API pueden
acceder a los servicios API HTTP a travs de una
conexin segura (HTTPS).
2.4. BENEFICIOS DE GOOGLE MAPS APIs
Acceda a los datos locales: Las API de Google
Places ofrecen acceso ilimitado a la base de datos
mundial de Google para su aplicacin, con ms de
cien millones de fichas de empresas y lugares de
inters.
Mustrele a su usuario la mejor ruta: La API de
Directions, que ofrece instrucciones para llegar en
automvil en 199 pases, le permite ayudar a sus
usuarios a encontrar la forma de llegar a su tienda,
hotel y otros destinos.
Obtenga acceso ilimitado: Permita que sus
usuarios vean a dnde se dirigen, incluso antes de
llegar a destino, gracias a las imgenes de gran
precisin visual de Street View.
2.5. CARACTETISTICAS FUNDAMENTALES
DE LAS API DE GOOGLE MAPS
Bsqueda de empresas y de lugares de inters:
Las API de Google Maps ofrecen acceso ilimitado a
la base de datos mundial de Google para su
aplicacin, con ms de cien millones de fichas de
empresas y lugares de inters. Si se necesita
mostrar a los usuarios bares, cafeteras, aeropuertos
o tiendas, puede proporcionar una lista filtrada con
los lugares ms relevantes para ellos.
Imgenes en 45 grados: Incluyen acceso a
imgenes en 45 grados de ms de 120 ciudades de
todo el mundo, logrado que los usuarios pueden
explorar datos desde una perspectiva nica en un
rea en particular.
 Instrucciones para llegar a destino: Ofrecen a sus
aplicaciones toda la potencia del motor de rutas de
Google. Se pueden crear rutas para recorrer en
automvil, a pie o en bicicleta, en hasta veintitrs
ubicaciones. Se ofrecen hasta tres rutas alternativas,
y los usuarios pueden arrastrar las rutas sobre el
mapa para hacer cambios. Las rutas pueden evitar
los peajes o las autopistas, y es posible reducir la
duracin del recorrido calculando el orden ptimo
en el que conviene visitar cada ubicacin.
Matrices de distancia: Si su aplicacin necesita
determinar rpidamente la duracin del viaje y la
distancia entre varios pares de ubicaciones, puede
usar el servicio Distance Matrix de las API de
Google Maps. Por ejemplo, si quiere crear un
buscador de ubicaciones y desea ofrecerles a los
usuarios una forma de filtrar los resultados por
tiempo de viaje en automvil, el servicio Distance
Matrix ofrece un mtodo rpido y simple de
analizar las ubicaciones cercanas que se deben
incluir.
Herramientas de dibujo: Las API de Google
Maps incluyen herramientas de dibujo listas para
usar que les permiten a los usuarios seleccionar
reas, soltar marcadores, y dibujar y editar formas.
Procesamiento KML: Si ya almacena y gestiona
datos geoespaciales en formato KML o GeoRSS,
puede agregarlos a cualquier aplicacin que use las
API de Maps con unas pocas lneas de cdigo.
Compatibilidad con diferentes dispositivos: Las
API de Google Maps garantizan el funcionamiento
de sus mapas en los navegadores web y dispositivos
mviles ms importantes. Detectan las pantallas de
alta resolucin, y el mapa se ajusta
automticamente para garantizar que siempre se
muestre con la mayor nitidez. [3]
2.6. COMO FUNCIONA GOOGLE MAPS API.
Es slo HTML, CSS y JavaScript trabajando junto.
Los mapas son solo imgenes que se cargan en el
fondo a travs de peticiones ejecutadas por la
tecnologa de AJAX, y se insertan en un <div> en
la pgina HTML. Mientras navegas en el mapa, el
API enva informacin acerca de las nuevas
coordenadas y los niveles de zoom del mapa a
travs de AJAX y esto retorna las imgenes.
El API consiste de archivos JavaScript que
contienen las clases, mtodos y propiedades que se
usan para el comportamiento de los mapas. Cmo
se usan?, de eso se trata esta gua. Esta gua tratar
acerca de la ltima versin creada al momento, la
versin 3.
Las coordenadas estn expresadas usando nmeros
decimales separados por coma. La latitud siempre
precede la longitud. La latitud es positiva si va
despus del punto mostrado en el mapa y negativo
si va antes. La longitud es positiva si va arriba del
punto y negativa si va debajo.
En los mapas fsicos, las coordenadas estn
expresadas en grados, un ejemplo es la posicin de
Puerto Rico sera:
181470 N 662968 W
La forma de convertir estos datos a decimales sera:
(181470 N) = (18 + (14 / 60) + (70 / 3600)) =
18.252
(662968 W) = -(66 + (29 / 60) + (68 / 3600)) = -
66.8627
La longitud se multiplica por negativo, porque est
a la izquierda (oeste) del punto 0,0. Para esta gua
solo vamos a estar trabajando con decimales.
2.6.1. Cunto es el mximo de decimales?
Google maps no se limita a cierta cantidad de
decimales. Sin embargo, segn unas pruebas
hechas, se not que nmeros mayores a 6 decimales
es una prdida de tiempo. As tambin google
estableci en varios mtodos que la mayor cantidad
a trabajar es 6 decimales, como por ejemplo el
mtodo toUrlValue().
Es decir, cuando vayamos a establecer los
decimales se puede hacer as:
5 a 6 decimales: es el mximo que debemos
usar para ser especficos
4 decimales: para algn detalle en el mapa
3 decimales: es bueno para centrar ciudades
2 decimales: es apropiado para centrar pases o
estados, tal vez 3 por Mnaco.
2.6.2. Notacin MapOptions
MapOptions contiene la informacin de cmo
queremos ver el mapa y cmo queremos que se
comporte. Se requiere tres propiedades:
zoom: Define el zoom inicial. Debe ser un
nmero entre el 1 y el 23. El 1 es el mapa
completamente afuera y 23 es completamente
adentro.
center: Define el centro del mapa con las
coordenadas. Las coordenadas debe indicarse
usando el mtodo google.maps.LatLng(latitud,
longitud).
mapTypeId: Define qu tipo de mapa se desea
mostrar al inicio.
Los opcionales son:
keyboardShortcuts: Habilita o inhabilita el
uso del teclado. Las teclas a usar son las flechas
para mover el mapa y +/- para el zoom.
o Valores: true|false, por defecto true.
disableDoubleClickZoom: Habilita
inhabilita el doble click del ratn para hacer
zoom.
o Valores: true|false por defecto false.
draggable: Habilita o inhabilita el poder
arrastrar el mapa.
o Valores: true|false, por defecto true.
scrollwheel: Habilita o inhabilita el poder
hacer zoom con la rueda del ratn.
o Valores: true|false, por defecto true.
draggableCursor: Indica que tipo de cursor
deseas mostrar cuando el ratn est encima del
mapa. El valor es del tipo cadena y pueden ser
los que una computadora tiene por defecto y la
mayora de los que estn mencionado en el
siguiente listado o puede ser uno personalizado
y la ruta puede ser local (en el servidor de la
aplicacin) o una direccin web externa.
draggingCursor: Indica que tipo de cursor
deseas mostrar cuando el ratn est presionado
en el mapa. El valor es del tipo cadena y
pueden ser los que una computadora tiene por
defecto y la mayora de los que estn
mencionado en el siguiente listado o puede ser
uno personalizado y la ruta puede ser local (en
el servidor de la aplicacin) o una direccin
web externa.
backgroundColor: Esta propiedad afecta el
color del fondo del contenedor. Tpicamente se
ve cuando se arrastra el mapa o cuando carga al
inicio. Puedes usar un valor hexadecimal o la
forma estndar (red, yellow, green, blue, etc).
Por defecto el color es con el valor hexdecimal
#E5E3DF
noClear: Habilita o inhabilita que se sobre-
escriba lo que haya en el contenedor. Por lo
regular la forma como se trabaja para colocar
contenido encima del contenedor es usando un
elemento fuera del contenedor que muestra el
mapa y con CSS se coloca en el lugar deseado
en el mapa.
o Valores: true|false, por defecto false.
disableDefaultUI: Habilita o inhabilita mostrar
el UI que viene predefinido.
o Valores: true|false, por defecto false.
mapTypeControl: Habilita o inhabilita el
o control de tipo de mapa.
mapTypeControlOptions: Son las opciones de
visualizacin iniciales del control de tipo de
mapa.
navigationControl: Habilita o inhabilita el
control de navegacin.
o Valores: true|false, por defecto true.
navigationControlOptions: Son las opciones
de visualizacin iniciales del control de
navegacin.
scaleControl: Habilita o inhabilita el control de
escala.
o Valores: true|false, por defecto true.
scaleControlOptions: Son las opciones de
visualizacin iniciales del control de escala.
streetViewControl: Habilita o inhabilita el
hombrecito de Street View. Est disponible
en ciertas reas.
o Valores: true|false, por defecto false.
[4]
2.7. BIBLIOTECA DE DIBUJO
La clase DrawingManager proporciona a los
usuarios una interfaz para que dibujen polgonos,
rectngulos, polilneas, crculos y marcadores en el
mapa.
2.7.1. Como usar la biblioteca de dibujo.
Las herramientas de dibujo constituyen una
biblioteca independiente separada del cdigo de
JavaScript de la Google Maps API principal. Para
usar la funcionalidad contenida en esta biblioteca,
primero debes cargarla usando el parmetro
libraries en la URL de arranque de Maps API:
Ilustracin 1. Carga de librera de Google Maps API
Una vez que agregues el parmetro de bibliotecas,
puedes crear un objeto DrawingManager de la
siguiente manera:
seleccionador de formas del control de dibujo. El
icono de la mano siempre estar presente. Esto
permitir al usuario interactuar con el mapa sin
dibujar. El orden de las herramientas en el control
coincidir con el orden en que estas se declaren en
el conjunto.
A cada tipo de superposicin puede asignarse un
conjunto de propiedades predeterminadas que
definen el aspecto de la superposicin cuando se
crea por primera vez. Estas se definen en la
propiedad {overlay}Options de la superposicin
({overlay} representa el tipo de superposicin). Por
ejemplo, las propiedades de relleno de un crculo y
trazo, zIndex y la posibilidad de aplicar clics
pueden definirse con la propiedad circleOptions. Si
se pasan valores de tamao, ubicacin o mapas,
estos se ignorarn.

Ilustracin 2. Carga de objeto de dibujo

2.7.2. Opciones de DrawingManager

El constructor DrawingManager toma un conjunto
de opciones que definen un conjunto de controles
que se mostrarn, la posicin del control y el estado
inicial del dibujo.
La propiedad drawingMode de DrawingManager
define el estado inicial del dibujo de
DrawingManager. Acepta una constante
google.maps.drawing.OverlayType. El valor
predeterminado es null. En este caso, el cursor se
encuentra en un modo no habilitado para dibujar
cuando se inicializa DrawingManager.
La propiedad drawingControl de DrawingManager
Ilustracin 3. Datos iniciales del mapa
define la visibilidad de la interfaz de seleccin de
herramientas de dibujo en el mapa. Acepta un valor 2.7.3. Opciones de DrawingManager
booleano. Una vez creado el objeto DrawingManager, puedes
Tambin puedes definir la posicin del control y los actualizarlo llamando a setOptions() y pasando
tipos de superposiciones que deben representarse en nuevos valores.
el control usando la propiedad
drawingControlOptions de DrawingManager.
position define la posicin del control de dibujo en
el mapa, y acepta una constante
google.maps.ControlPosition. Ilustracin 4. Actualizacin de mapa con setOptions
drawingModes es un conjunto de constantes
google.maps.drawing.OverlayType y define los
tipos de superposiciones que deben incluirse en el
 Para ocultar o mostrar el control de herramientas de con drawingManager.setMap(map), o un nuevo
dibujo: objeto DrawingManager construido, en caso de que
deban restaurarse las funciones de dibujo.

2.7.4. Eventos de dibujo

Cuando se crea una superposicin de forma, se
activan dos eventos:
Un evento {overlay} complete (en el cual
Ilustracin 5. Control de visualizacin de herramientas de {overlay} representa el tipo de superposicin,
dibujo
como circlecomplete, polygoncomplete, etc.).
Para eliminar el control de herramientas de dibujo Se pasa una referencia a la superposicin como
del objeto map: argumento.
Un evento overlaycomplete. Se pasan un literal
de objeto, que contiene OverlayType, y una
Ilustracin 6. Eliminacin de control de herramientas de referencia a la superposicin como argumento.
dibujo [5]
Si se oculta el control de dibujo, no se muestra el
control de las herramientas de dibujo. No obstante,
la funcionalidad de la clase DrawingManager
permanecer disponible en su totalidad. De esta
manera, puedes implementar tu propio control si lo
deseas. Si se elimina DrawingManager del objeto
map, se deshabilita por completo la funcionalidad
Ilustracin 7. Eventos de dibujo
de dibujo. Ser necesario volver a adjuntar al mapa

3. BIBLIOGRAFIA
[1] Abimael Rodrguez Coln. Google Maps API V3
introduccin y primeros pasos. (04/04/11). [Online].
Disponible en: http://www.maestrosdelweb.com/google-
maps-api-v3-introduccion-y-primeros-pasos/
[2] Wikipedia. Google Maps.[Online]. Disponible en:
https://es.wikipedia.org/wiki/Google_Maps
[3] Google. Google Maps APIs. [Online]. Disponible en:
https://enterprise.google.com/intl/es-
419/maps/products/mapsapi.html
[4] Abimael Rodrguez Coln. Google Maps API V3
introduccin y primeros pasos. (04/04/11). [Online].
Disponible en: http://www.maestrosdelweb.com/google-
maps-api-v3-introduccion-y-primeros-pasos/
[5] API de Google Maps, Capa (Biblioteca) de dibujo.
[Online]. Disponible en:
https://developers.google.com/maps/documentation/javascri
pt/drawinglayer?hl=es-419