Post on 11-Dec-2015
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 1/17
Google Maps API V3introducción y primerospasos
abril 4 2011
Google Maps fue desarrollado originalmente por dos hermanos Daneses, Lars y
Jens Rasmussen, co-fundadores de Where 2 Technologies una empresa
dedicada a la creación de soluciones de mapeo. La empresa fue adquirida por
Google en octubre de 2004, y los dos hermanos luego crearon Google Maps
(también son los que están detrás de Google Wave).
AbimaelRodríguez
Abimael Rodríguez Colón
Antes de que hubiera una API pública, algunos desarrolladores descubrieron la manera
de hackear Google Maps para incorporar los mapas en sus propios sitios web. Esto llevó a
Google a la conclusión de que había una necesidad de una API pública, y en junio de 2005
DESARROLLO WEB
EDITORIALES
GUÍAS
CURSOS
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 2/17
fue lanzado públicamente.
El mashup por primera vez en Internet es a menudo considerado que lo ejerció
Housingmaps.com, una combinación de Google Maps con los listados de bienes raíces de
Craiglist.org. Fue creado de hecho antes de la API pública fuera puesto en libertad y fue
hackeado por el desarrollador Paul Rademacher. En mayo de 2010, se anunció la versión 3
del API. Ahora es la opción recomendada para las nuevas aplicaciones de Google Maps y el
siguiente paso en la historia de Google Maps.
¿Cómo funciona Google Maps?
Es sólo HTML, CSS y JavaScript trabajando junto. Los mapas son solo imágenes que se
cargan en el fondo a través de peticiones ejecutadas por la tecnología de AJAX, y se insertan
en un <div> en la página HTML. Mientras navegas en el mapa, el API envía información
acerca de las nuevas coordenadas y los niveles de “zoom” de el mapa a través de AJAX y esto
retorna las imágenes.
El API consiste de archivos JavaScript que contienen las clases, métodos y propiedades
que se usan para el comportamiento de los mapas. ¿Cómo se usan?, de eso se trata esta guía.
Esta guía tratará acerca de la última versión creada al momento, la versión 3.
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 3/17
Las coordenadas están expresadas usando números decimales separados por coma. La
latitud siempre precede la longitud. La latitud es positiva si va después 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 físicos, las coordenadas están expresadas en grados, así que la posición
de Puerto Rico sería:
18°14’70” N 66°29’68” W
La forma de convertir estos datos a decimales sería:
(18°14’70” N) = (18 + (14 / 60) + (70 / 3600)) = 18.252
(66°29’68” 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 guía solo vamos a estar trabajando con decimales.
¿Cuánto es el máximo de decimales?
Google maps no se limita a cierta cantidad de decimales. Sin embargo, según unas pruebas
hechas, se notó que números mayores a 6 decimales es una perdida de tiempo. Así también
google estableció en varios métodos que la mayor cantidad a trabajar es 6 decimales, como
por ejemplo el método toUrlValue(). Es decir, cuando vayamos a establecer los
decimales se puede hacer así:
5 a 6 decimales: es el máximo que debemos usar para ser específicos4 decimales: para algún detalle en el mapa3 decimales: es bueno para centrar ciudades2 decimales: es apropiado para centrar paises o estados, tal vez 3 por monaco
Preparando el área de trabajo
Para propósito de enseñanza tomaremos el 100% de ancho y el 100% de alto del navegador.
También nos limitaremos a explicar solo la parte del API. Para referencia sobre el último
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 4/17
API que contiene las clases, métodos y propiedades pueden ir a la dirección
http://code.google.com/intl/es/apis/maps/documentation/javascript/reference.html
En el siguiente código:
La dirección apunta al API, pero también se requiere pasar una cadena de consulta con la
llave sensor. Esto le indica a Google si el dispositivo que usa el mapa, tiene un dispositivo
que determina la geolocalización, como por ejemplo un GPS. Es forzoso mencionarlo y
como valor indicar si es falso o cierto. Falso para los que no lo usan y cierto para los que sí
lo usan. Esto lo usa Google para proveer estadísticas a sus proveedores. No tiene que ver
con habilitarlo para la geolocalización.
También se añadió el lenguaje, aunque el API trata de determinar cual es el lenguaje a
mostrar, pero puedes especificarlo usando la llave language. En este ejemplo no hemos
mencionado la llave api ya que para la versión 3 no se usa.
01020304050607080910111213141516171819
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http‐equiv="Content‐Type" content="text/html; charset=UTF‐8" <title>test</title> <style> *{ margin: 0; padding: 0; } html, body, #map{ width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es <script type="text/javascript" src="js/map.js"></script</head><body> <div id="map"></div></body></html>
1 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&;amp;language=es
?
?
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 5/17
Es importante que el código mencionado anteriormente, se encuentre debajo del elemento
<script> que incluye el API, para que así se pueda cargar todas las clases, métodos y
propiedades a usar. Las clases, métodos y propiedades comienzan con google.maps. A
eso se le conoce como namespace.
Dentro del archivo map.js escribimos:
Esto nos trae el mapa de Puerto Rico. ¿Qué es lo que hace? Primero indicamos que
queremos que el mapa se muestre una vez se haya cargado toda la información con el
evento window.onload. Para iniciar el mapa hacemos uso de la clase
google.maps.Map(). A este se le indica dos argumentos:
La referencia hacia el elemento que mostrará el mapa, en este caso el elemento <div>
1 <script type="text/javascript" src="map.js"></script>
12345678
window.onload = function(){ var options = { zoom: 8 , center: new google.maps.LatLng(18.2, ‐66.4) , mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById('map'};
?
?
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 6/17
con el atributo id que tiene como valor map.Una notación literal llamada MapOptions que contiene la configuración inicial paramostrar el mapa como por ejemplo, el “zoom”, donde está el centro y que tipo de mapadeseamos mostrar.
MapOptions
MapOptions contiene la información de cómo queremos ver el mapa y cómo queremos
que se comporte. Se requiere tres propiedades:
zoom: Define el “zoom” inicial. Debe ser un número entre el 1 y el 23. El 1 es el mapacompletamente afuera y 23 es completamente adentro.center: Define el centro del mapa con las coordenadas. Las coordenadas debeindicarse usando el método google.maps.LatLng(latitud, longitud).mapTypeId: Define que tipo de mapa se desea mostrar al inicio.
Los opcionales son:
keyboardShortcuts: Habilita o inhabilita el uso del teclado. Las teclas a usar son lasflechas para mover el mapa y +/- para el “zoom”.Valores: true|false, por defecto true.disableDoubleClickZoom: Habilita o inhabilita el doble click del ratón para hacer“zoom”.Valores: true|false por defecto false.draggable: Habilita o inhabilita el poder arrastrar el mapa.Valores: true|false, por defecto true.scrollwheel: Habilita o inhabilita el poder hacer “zoom” con la rueda del ratón.Valores: true|false, por defecto true.draggableCursor: Indica que tipo de cursor deseas mostrar cuando el ratón estáencima del mapa. El valor es del tipo cadena y pueden ser los que una computadoratiene por defecto y la mayoría de los que están mencionado en el siguiente listado opuede ser uno personalizado y la ruta puede ser local (en el servidor de la aplicación) ouna dirección web externa.draggingCursor: Indica que tipo de cursor deseas mostrar cuando el ratón estápresionado en el mapa. El valor es del tipo cadena y pueden ser los que una
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 7/17
computadora tiene por defecto y la mayoría de los que están mencionado en elsiguiente listado o puede ser uno personalizado y la ruta puede ser local (en el servidorde la aplicación) o una dirección web externa.backgroundColor: Esta propiedad afecta el color del fondo del contenedor.Típicamente se ve cuando se arrastra el mapa o cuando carga al inicio. Puedes usar unvalor hexadecimal o la forma estándar (red, yellow, green, blue, etc). Por defecto elcolor es con el valor hexádecimal #E5E3DFnoClear: Habilita o inhabilita que se sobre-escriba lo que haya en el contenedor. Porlo regular la forma como se trabaja para colocar contenido encima del contenedor esusando un elemento fuera del contenedor que muestra el mapa y con CSS se coloca enel lugar deseado en el mapa.Valores: true|false, por defecto false.disableDefaultUI: Habilita o inhabilita mostrar el UI que viene predefinido.Valores: true|false, por defecto false.mapTypeControl: Habilita o inhabilita el control de tipo de mapa.mapTypeControlOptions: Son las opciones de visualización iniciales del control detipo de mapa.navigationControl: Habilita o inhabilita el control de navegación.Valores: true|false, por defecto true.navigationControlOptions: Son las opciones de visualización iniciales delcontrol de navegación.scaleControl: Habilita o inhabilita el control de escala.Valores: true|false, por defecto true.scaleControlOptions: Son las opciones de visualización iniciales del control deescala.streetViewControl: Habilita o inhabilita el hombrecito de “Street View”. Estádisponible en ciertas áreas.Valores: true|false, por defecto false.
Modificamos y añadimos el siguiente código al archivo map.js
010203040506
window.onload = function(){ var options = { zoom: 8 , center: new google.maps.LatLng(18.2, ‐66.4) , mapTypeId: google.maps.MapTypeId.SATELLITE
?
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 8/17
060708091011121314151617181920212223242526272829303132333435363738
, backgroundColor: '#ffffff' , noClear: true , disableDefaultUI: true , keyboardShortcuts: false , disableDoubleClickZoom: true , draggable: false , scrollwheel: false , draggableCursor: 'move' , draggingCursor: 'move' , mapTypeControl: true , mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_MENU , position: google.maps.ControlPosition.TOP_LEFT , mapTypeIds: [ google.maps.MapTypeId.SATELLITE ] } , navigationControl: true , streetViewControl: true , navigationControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT , style: google.maps.NavigationControlStyle.ANDROID } , scaleControl: true , scaleControlOptions: { position: google.maps.ControlPosition.TOP_LEFT , style: google.maps.ScaleControlStyle.DEFAULT } }; var map = new google.maps.Map(document.getElementById('map'};
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 9/17
Modificar los valores ya asignados
Hasta ahora, hemos iniciado los valores directamente en el MapOptions para iniciar el
mapa. Luego de que se hayan cargado, podemos modificarlos con el método setOptions.
Podemos modificar la mayoría de las propiedades. Solo tres no son modificables: noClear,
backgroundColor y disableDefaultUI, por lo que debemos estar seguros qué
debemos hacer con ellos al inicio. El setOptions es de gran utilidad para interactuar con
el usuario. Veamos un ejemplo
0102030405060708091011121314151617181920
window.onload = function(){ var options = { zoom: 8 , center: new google.maps.LatLng(18.2, ‐66.4) , mapTypeId: google.maps.MapTypeId.SATELLITE , backgroundColor: '#ffffff' , noClear: true , disableDefaultUI: true , keyboardShortcuts: false , disableDoubleClickZoom: true , draggable: false , scrollwheel: false , draggableCursor: 'move' , draggingCursor: 'move' , mapTypeControl: true , mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_MENU , position: google.maps.ControlPosition.TOP_LEFT
?
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 10/17
202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
, position: google.maps.ControlPosition.TOP_LEFT , mapTypeIds: [ google.maps.MapTypeId.SATELLITE ] } , navigationControl: true , streetViewControl: true , navigationControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT , style: google.maps.NavigationControlStyle.ANDROID } , scaleControl: true , scaleControlOptions: { position: google.maps.ControlPosition.TOP_LEFT , style: google.maps.ScaleControlStyle.DEFAULT } }; var map = new google.maps.Map(document.getElementById('map' map.setOptions({ zoom: 10 , center: new google.maps.LatLng(18.17, ‐66.42) , mapTypeId: google.maps.MapTypeId.TERRAIN , keyboardShortcuts: true , disableDoubleClickZoom: false , draggable: true , scrollwheel: true , draggableCursor: 'hand' , draggingCursor: 'hand' , mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU , position: google.maps.ControlPosition.TOP_RIGHT , mapTypeIds: [ google.maps.MapTypeId.ROADMAP , google.maps.MapTypeId.SATELLITE ] } , navigationControlOptions: { position: google.maps.ControlPosition.TOP_LEFT , style: google.maps.NavigationControlStyle.ZOOM_PAN }
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 11/17
Getters y Setters
Existen unos métodos que nos permiten solo modificar y/o obtener los resultados de las
propiedades que son requisitos.
getZoom()setZoom(1‐23)getCenter()setCenter(google.maps.LatLng(latitud, longitud))getMapTypeId()setMaptTypeId(google.maps.MapTypeId.*)
Uniendo todo
6465666768697071
} , scaleControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT , style: google.maps.ScaleControlStyle.DEFAULT } });};
01020304
05
window.onload = function(){ var options = { zoom: 8 , center: new google.maps.LatLng(18.2, ‐66.4)
, mapTypeId: google.maps.MapTypeId.SATELLITE
?
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 12/17
050607080910111213141516171819202122232425262728293031323334353637383940414243444546474849
, mapTypeId: google.maps.MapTypeId.SATELLITE , backgroundColor: '#ffffff' , noClear: true , disableDefaultUI: true , keyboardShortcuts: false , disableDoubleClickZoom: true , draggable: false , scrollwheel: false , draggableCursor: 'move' , draggingCursor: 'move' , mapTypeControl: true , mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_MENU , position: google.maps.ControlPosition.TOP_LEFT , mapTypeIds: [ google.maps.MapTypeId.SATELLITE ] } , navigationControl: true , streetViewControl: true , navigationControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT , style: google.maps.NavigationControlStyle.ANDROID } , scaleControl: true , scaleControlOptions: { position: google.maps.ControlPosition.TOP_LEFT , style: google.maps.ScaleControlStyle.DEFAULT } }; var map = new google.maps.Map(document.getElementById('map' map.setOptions({ zoom: 10 , center: new google.maps.LatLng(18.17, ‐66.42) , mapTypeId: google.maps.MapTypeId.TERRAIN , keyboardShortcuts: true , disableDoubleClickZoom: false , draggable: true , scrollwheel: true , draggableCursor: 'hand'
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 13/17
49505152535455565758596061626364656667686970717273747576777879808182
, draggableCursor: 'hand' , draggingCursor: 'hand' , mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU , position: google.maps.ControlPosition.TOP_RIGHT , mapTypeIds: [ google.maps.MapTypeId.ROADMAP , google.maps.MapTypeId.SATELLITE ] } , navigationControlOptions: { position: google.maps.ControlPosition.TOP_LEFT , style: google.maps.NavigationControlStyle.ZOOM_PAN } , scaleControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT , style: google.maps.ScaleControlStyle.DEFAULT } }); map.setZoom(9); var zoomLevel = map.getZoom(); map.setCenter(new google.maps.LatLng(18.17, ‐66.3)); var centerOfMap = map.getCenter(); map.setMapTypeId(google.maps.MapTypeId.ROADMAP); var mapTypeIdOfMap = map.getMapTypeId(); alert(zoomLevel + ' ‐‐ ' + centerOfMap + ' ‐‐ ' + mapTypeIdOfMap);};
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 14/17
AbimaelRodríguezColón
4
Twittear
135
Abimael Rodríguez ColónAficionado a varios lenguajes (PHP, CSS, Javascript, MySQL, Oracle,HTML).
7
Compartir Compartir
Otros artículos que podrían interesarte
Fedora Conference 2014:software libre para laadministración pública,cervezas y un paseo porPraga
La escuela de las Startups
Lo peor y lo … peor detrabajar para una startup
Los 10 trabajos másriesgosos para … un dron
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 15/17
francisco
Bastante educativo el articulo, gracias!
Ricardo
Muy buena introducción! Espero con ganas las siguientes partes!Saludos
Luciano Muñoz
Muy bueno el articulo, espero con ansias lo que vendra ya que me interesa mucho este tema pero hasta el momento no habia tenidotiempo de ponerme a ver como funciona la API…
Muchas gracias…
Saludos desde Argentina…
Andrés
Excelente introducción!
Victor Sánchez
Muy útil Abimael. Ya le daré una chequeadita cuando llegue a casa. Saludos.
RBZ
Muy bueno, Abimael. Claro y sencillo, directo a marcadores.
popobcn
Simplemente magnifico. Estoy desarrollando algo relacionado y la verdad es que con la introducción que has hecho es francamentedetallada.
andres henao
excelente articulo, lo felicito Abimael.
Consejos prácticos para el InfoWindow en Google Maps
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 16/17
[…] empezar usaremos el mismo área de trabajo que el capítulo 1 (Google Maps API V3 introducción y primeros pasos) y capítulo 2(Marcadores, posicionar una imagen en el mapa). Luego iremos modificándolo conforme […]
Arturo
saludos
Esta bastate bueno y entendible pero tengo dudas con key de google donde puedo encontrar ejemplos porfavor una ayuda,por quetengo q graficar una ruta desde un punto x a un punto y utilizando un algoritmo de busqueda en java
Abimael Rodríguez Colón
En el capítulo 4 estaremos hablando sobre poligonos y polilineas.
Gabriel
Ta bno pero acabo de probar el codigo que das para iniciar y en un formato xhtml no me dspliega el mapa :S… copie todo igual y porningun lado encuentro solucion o rta real a esto… sirve o NO la API v3 en XHTML?
Gabriel
Lo he testeado y en archivos con extension XHTML no se despliega el mapa… parece que no sirve en este tipo de documento, porqueuse el mismo codigo pero en un HTML creado desde NetBeans y funciono perfectamente
Abimael Rodríguez Colón
Interesante lo que indicas. Acabo de copiar la misma área de trabajo, lo pegué en un archivo a ver si de casualidad tenía algúncaracter raro y se mostró la información usando el mismo formato que indiqué arriba.
Abimael Rodríguez Colón
Oh, también hay que recordar que le estoy indicando al archivo que los caracteres son con la codificación utf8. Eso quiere decir queel archivo debe también de tener ese formato, si no, entonces trate a ver si con iso88591 le funciona correctamente.
Gabriel
Pues es que soy apenas un aprendiz en esto de los desarrollos web, y estoy usando Netbeans para crear los proyectos web queempiezo a desarrollar, entonces no se como cree netbeans los archivos .XHTML y .HTML que le doy crear por ahi, hasta ahora retomeesto y no me muestra el mapa ni nada copiando el codigo que tenes en el ejemplo
Ibiza
Hola. Gracias por tu ejemplo que me ha funcionado a la primera, aunque me ha quedado una duda. Estoy cambiando a la v3 parautilizar las funcionalidades del sensor. El problema que veo es que tenemos que ser nosotros quien le indiquemos a google eldispositivo que esta utilizando el usuario. Y aquí me pierdo ¿Cómo averiguo yo que utiliza el usuario y si su dispositivo es compatiblecon la utilización del sensor? ¿O esta funcionalidad es para decirle a google si queremos que muestre o no la posición del usuario?Un saludo
Abimael Rodríguez Colón
Saludos,
Desconozco si existe alguna librería o algún método que detecte si el dispositivo tiene sensor. Pero podrías buscar en las cabecerasque envia el dispositivo para verificar cuál dispositivo es, y así indicar al API si tiene o no. Por ejemplo con PHP existe la variable$_SERVER que te puede brindar esa información
Moisex
muy buen tutorial, muchisimas gracias
Andy
Excelente artículo! Me gusta mucho esto que estás haciendo, ojala y sigas así con más y más artículos.. bueno, espero no te canses
Tus tutos me van como anillo al dedo para un pequeño experimento con el google maps que deseaba hacer tiempito atrás.
Saludos,Un abrazo!
frajagon
Excelente entrada, despejaron varias dudas de como resolver unos pequeños problemas que tenia en una implementación que llevoa cabo
Gracias.
Renzo
Por favor!!!!alguien me puede ayudar a encontrar una manera facil de
7/9/2015 Google Maps API V3 introducción y primeros pasos
http://www.maestrosdelweb.com/googlemapsapiv3introduccionyprimerospasos/ 17/17
obterner las coordenadas, y poder modificarlas y manejarlascon claridad en google maps.He encontrado esto en google labs,http://maps.google.es/support/bin/answer.py?hl=es&answer=1334236&ctx=cb&src=cb&cbid=od6v07pibec8&cbrank=1pero las coordenadasque me da cuando las aplico, no concuerdan.
Paintball Madrid
Muy Bueno, ha sido de gran ayuda ya que tenia algunas dudas, garcias y un Saludo a todos.