IntroduccinaGoogleMaps

Pgina1de12

IntroduccinaGoogleMaps

Indice
Introduccin
Paraquinesestelibro
Captulo1:Introduccin
IntroduccinaGoogleMaps
RecomendacionesantesdeempezarconGoogleMaps
ComfuncionaestcosallamadaGoogleMaps?
FundamentosBsicossobrecoordenadas
CmoleerladocumentacindelaAPI
Captulo2:Conceptosbsicos
Creandotuprimermapa
Jugandoconlasopcionesdemapa
DeshabilitarlaInterfazporcompleto
Configurarcomomostrarlostiposdemapa
Controldenavegacin
keyboardShortcuts
disableDoubleClickZoom
draggable
scrollwheel
streetViewControl
Crearcontrolespersonalizados
Metodosdenuestroobjetomapa.
setOptions()
getZoom()ysetZoom()
getCenter()ysetCenter()
getMapTypeId()ysetMapTypeId()
Captulo3:Overlays
Overlay:Marker.
Cambiandoeliconodelmarker
AgregarunaInfowindow
Creareventos
Creareventoenelmarker
InfowindowcontenidoHTML
Cambiadoeliconodelmakerconeventos
Makerarrastrableenelmapayanimado
Overlay:Polylines.
Overlay:Polygons
Overlay:Circle
Overlay:Rectangle
Algunoseventosatenerencuentadelosoverlay
Overlay:Ground
Pgina2de12

4
4
5
5
5
7
7
8
10
10
14
14
14
17
18
18
19
19
19
20
22
23
23
23
24
25
25
27
29
30
32
33
34
35
35
39
42
43
45
45

IntroduccinaGoogleMaps

DrawingLibrary
Captulo4:TareasComunesenGoogleMaps
Trabajandoconmltiplesoverlays
DemasiadosMakerenelmapa
MarkerClusterer
MarkerSpiderfier
MarkerManager
UsandoMarkerManagercomoCluster
Maplabel
Localizaralusuario
PlacesAutocomplete
UsandoPanoramio
Mostrandoelclima
ReverseGeocoding
StaticMapsAPI
Captulo5:Guardarycargartuoverlays
SerializarMarker
Serializarrectangle
Serializarpolyline
Serializarpolygon
Serializarcircle
Serializarelmapa
DeserializarMarker
Deserializarrectangle
DeserializarPolyline
DeserializarPolygon
DeserializarCircle
ActualizarMap
EjemplosAdicionales
ObtenerpuntosLatlngcontenidosdentrodeunbounds
Clculodereasydistancias

Pgina3de12

46
50
50
53
54
56
57
60
63
65
67
70
72
74
79
81
82
86
87
90
91
92
94
97
99
101
102
103
106
106
107

IntroduccinaGoogleMaps

Introduccin
Les presentomi primer libro,quenaciarazdelapoca documentacinqueexistesobrecmo
usar los mapas degoogle.Quierocompartirmiexperienciadems3aosdetiempocompleto,
que he dedicado al desarrollo de mapas con la API deGoogle Maps. Esto, con el objetivo de
que el lector sea capaz de asimilar los conceptos bsicos y tcnicas necesarias, para crear
sus propios mapasen susproyectos web. En ellibroharemosusodelaversin 3.13queest
disponibleactualmente,duranteeldesarrollodellibro.
Tambin, quiero agradecer a mi familia por brindarme su apoyo en el proceso de este libro,
especialmenteamimadrequesiempremeestuvoapoyandoentodo.

Para quin es este libro

Este libro est orientado principalmente a desarrolladores/diseadores web, quienes desean
aprender como crear sus propiosmapasparasusproyectosweb. Notepreocupes,sinoestas
entre estas reas el objetivo del libro es ayudarte acomprenderdesdelomsbsicodelaAPI
de Google Maps. Aunquetener cierta experiencia yconocimientosbsicossobreprogramacin
websernunagranventaja.

Acerca del autor

Mi nombre es SalBurgos Dvila, soy ingeniero en computacin y trabajo
como desarrollador de aplicaciones web, desde hace 4 aos a tiempo
completo. En mi actualempleoenOOQIA desarrollo aplicacioneswebque
incorporan soluciones de mapas y la API de Google Maps es mi principal
herramienta de trabajo. Me considero a mi mismo como un entusiasta de
Google Maps, siendo una
demisherramientasfavoritasdedesarrollo.
La cual complemento con slidos conocimientos de Javascript y el usode
tecnologas libres, buscando siempre cumplir con los estndares webdela
actualidad.
Enfocado principalmente en el desarrollo frontend, estoy en la constante exploracin de
nuevas tecnologas libres, que me permitan crear aplicaciones web robustas y slidas.
Herramientas quemepermitanabstraermedeloscomplicadostecnicismosdeloslenguajesde
programacin,paraenfocarmeenunaexperienciadeusuariolimpiaysimple.

Pgina4de12

IntroduccinaGoogleMaps

Captulo 1:Introduccin
IntroduccinaGoogleMaps
En la actualidad, granparte de las aplicaciones web requieren el uso detecnologade mapas,
para mostrar direcciones, ubicar localidades, mostrar rutas, ubicaciones en tiempo real, etc
Cualquier ubicacinpuedeserlocalizadaen elmapaquenosotrosqueramosmostraralusuario
ennuestrositio.
Google Maps: Nos ofrecetodo el poder de suAPI para quenosotrospodamoscrearmapas de
manera fcil, confiable y sobre todo multiplataforma. Nuestro mapa puede ser visto desde
cualquier dispositivo sea tablet, smartphone o desktop, graciasa los nuevos estndares HTML
5,Javascript,CSS3.
EnestelibronosenfocaremosenGoogleMapsAPIconJavascript.
RecomendacionesantesdeempezarconGoogleMaps
Estas recomendaciones son basadas en mi propia experiencia y viendo a compaeros de
trabajo que iniciaron por primera vez con Google Maps, despus de leer estas
recomendaciones quizs pienses que necesitas aprender muchas cosas antes de empezar
Google Maps. Perodjamedecirtequesonslorecomendacionesdemiparte,quevalelapena
saber antes de iniciar con Google Maps. Pero, es posible aprender a usar Google Maps sin
saberalgunasdeellas.
Javascript: Ok esto es ms que obvio, ya que en este libro veremos la Google Maps API
basado en javascript, me gustara hacer nfasis en algunos puntos que considero importantes
quedebesmanejarconjavascript.
1. Arreglos: Debes sabercomotrabajarconarreglos,estoesimportanteporquelamayora
del tiempo tendrs que iterar sobre los elementos, agregar elementos, eliminar
elementosymodificarelementosdeunarreglo.
2. Programacin orientada a objeto: Javascript es un lenguaje orientado objeto, por esta
razn debes de saberque es un mtodo, una propiedad, que es eltipodedatosobjeto,
decomoinstanciarunaclaseyelusodeprototype.
3. JSON (JavaScript Object Notation): Necesitas saber la importancia de este formato de
como usarlo, crearlo y manipularlo. Ya que a lo largo de este libro, lo usaremos en
nuestrosejemplostodoeltiempo.

Pgina5de12

IntroduccinaGoogleMaps

4. AJAX (AsynchronousJavaScriptAnd XML) EsimportantesaberelconceptodeAJAX,de

comofuncionayparaqusirve.
5. Saber leer una API: Esta una de las partes que me tocar explicar un poco, el primer
problema queencontr cuando comenc con GoogleMaps, esquenosabacmoleer
la documentacin de una API y el mismo problema lo visto en otras personas
continuamente.Estopuede ocasionar que el desarrolladorse frustre muy fcil desdeel
inicio. Un gran problema a veces con las API es la pobre y mal organizada
documentacin en lossitios webs que terminan confundiendo msal desarrollador. En
este punto tengo que hacer notar, que la documentacin de la API de Google Maps es
una de las mejores organizadas que he visto. A largo del libro, muchas veces har
referencia a secciones de la documentacin de Google Maps, mi objetivo con esto es
que aprendas a leer la documentacin de la API, ya que considero que este es un
problemamuycomnentrelaspersonasqueinicianconestaherramienta.
6. Jquery: Este es uno de lo frameworks ms populares de Javascript, sabercomousarlo
esunaenormeventaja.
7. En los ejemplos de este libro estamos usando variables globales, para almacenar
valores. Aunque en proyectos pequeos esto no tiene importancia es considerado una
mala prctica de programacin en javascript. En un proyecto de considerable tamao
estopuedeseruncaos,poresaraznsugieroqueaprendesunpocodeNamespacing
HTML, CSS: Como todo buen desarrollador tienes que saber de HTML, CSS que vendra
siendoalgobsicoparaconstruiraplicacionesweb.
Debugger Javascript: En toda aplicacin siempre habr errores en nuestro cdigo, ya sea
errores de sintaxis errores lgicos. Saber cmo descubrirlos es una parte vital para salir
adelante, por esorecomiendo que sepas lo mnimoparadebugeartucdigojavascript. Eneste
libro estaremos usandoel modo consola de Google Chrome,perotpuedesusarelnavegador
que quieras en su modo debugger. Si nunca haz usado el modo consola de un navegador te
recomiendoestelinkdondepuedesaprenderausarmodoconsoladeGoogleChrome.
Editor de texto: Como editor de texto para losarchivos yo recomiendo que uses notepad++,
peropuedesusarconelqueestesmascomodo.

Pgina6de12

IntroduccinaGoogleMaps

ComfuncionaestcosallamadaGoogleMaps?
Recuerdo la primeravez que vi un mapa de GoogleMaps,pensequeeralosmsincrebleque
haba visto con respeto a mapas, pero la mayora de las cosas en este mundo tiene su
explicacin.
Google Maps:Esunconjuntodecdigos:HTML,javascript y CSS. Trabajandojuntos concada
una de las secciones del mapa, puedes notar que son cargadas cuando te mueves o haces
zoom en el mapa. Esto ocurre mediante el mtodos AJAX y despus son insertadas en un
elemento<DIV>basadoencoordenadasdelmapa.
La API de Google Mapses un conjunto de clases con mtodos y propiedades que pueden ser
usadasparamanipularelmapacomotuquieras.
FundamentosBsicossobrecoordenadas
Para poder trabajar con la API necesitamos primero conocer el sistema de coordenadas que
usa GoogleMaps. La cuales WGS84 el mismo usado en los sistemaGPS,estascoordenadas
sonexpresadasenLatitudquerepresentaelvalorYyLongitudquerepresentaX.
Lalatitudsemidedesuranorteylongitudsemide deoesteaeste.Enelecuadorlalatitudes 0,
estonos indica,quetodoloqueestaarriba del ecuadorserunvalorpositivoyloqueesta abajo
de l, ser un valor negativo. Lo mismo pasa con longitud, pero est localizadoenelMeridiano
de Greenwich lo que se encuentraalesteserun valor positivoyaloesteunvalornegativo.En
lasiguienteimagenpodemosverloclaramente.

Pgina7de12

IntroduccinaGoogleMaps

Las coordenadas en Google Maps siguen en este orden: (Latitud, Longitud) esto es muy
importante de recordar, para crear nuestro puntos en el mapa. Los valores sonen decimales
separadosporcoma.
Ejemplo:38.97,1.23.
CmoleerladocumentacindelaAPI
La documentacin de Google Maps por lo general sigue la siguiente estructura para los
metodos:
Map(mapDiv:Node, opts?:MapOptions)
Lo primero es el nombre del mtodo, despus entre los parntesis se encuentran los
parmetros del mtodo. En los parmetros, el nombre que va antes de los2 puntos : es un
nombre descriptivoparaelparmetrosolamenteyloqueestadespuesdelos2puntos: esel
tipo de variable el cualdebe ser el parmetro. Si existe un signo de interrogacin enelnombre
descriptivodelparmetro,quieredecirqueesunparmetroopcional.
Los tipo de datos primitivos javascript son descritos por ellos mismo por ejemplo : string,
boolean,number.PerolosarreglosyMVCArraysondescritosdeunamaneradistintas.
Array.<MapTypeId> : Esto quiere decir que el valor de esta propiedad es un arreglo y que
cada elemento del arreglo es de tipo MapTypeId, que es un objeto especfico de Google
Maps.
MVCArray.<MapType> : Esto quiere decirque elvalorde estapropiedadesunMVCArrayque
contieneobjetosdeltipoMapType.
Otro dato importante es que todas las clases en Google Maps se encuentran dentro del
namespace google.maps.. Esto quiere decir que si quieres usar algn mtodo, clase o
constante de la API, tienes que escribir siempre primero google.maps. seguido por lo que
quierasusar.PorejemploaquestamosusandolaclaseLatLng:
newgoogle.maps.LatLng()

Pgina8de12

IntroduccinaGoogleMaps

Captulo 2: Conceptos bsicos

Creando tu primer mapa

Lo primero que necesitamos para crear nuestro primer mapa, segn la documentacin de
Google Maps es obtener una API KeyparapoderaccederalaAPI.Aunqueesposible, usarla
APIsinunaAPIKEYesrecomendablequeusestupropiaAPIKEYentusproyectos.
Por motivos de prctica, en este libro no usaremos una API KEY. Pero recomiendo que
consigasuna,cmolorecomiendagoogleenesteLink.
Antes de crear nuestro mapa necesitamos crear una pginawebsencilla,queincluyaelCSSy
Javascript necesarios. En esta prctica usaremos los archivos de prctica de la carpeta
nmero 1, donde encontrars los archivos necesarios para ver el ejemplo funcionando. A
continuacinexplicarelcdigo.
En nuestra carpeta de ejemplo tenemos 3 archivos llamados: index.html, googlemaps.js,
style.css,estossonlosarchivosquecomponennuestraaplicacin:
index.html: Aqu tenemos el DOM de nuestra aplicacin, siabreselarchivopodrsver,quees
bastante simple, el cual tiene un DOCTYPE de HTML 5. En la seccin <head> tenemos los
archivos CSS y Javascript que usa laaplicacin, tambin est cargadoelframeworkjavascript
Jquery,queesusadoalolargodeestelibro.
Estaeslapartemsimportante:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Con este script cargamosla API de Google Maps, para poderla usarennuestroproyecto.Para
nuestros ejemplosno la usaremos. En la URL existe un parmetro llamado: sensor ytieneel
valor false esto es para indicarle anuestro mapa, si nuestra aplicacin usa algn dispositivo
tipo GPS para determinarnuestraposicin. Esteparmetroesobligatorioydebedesertrueo
false,ennuestrocasoserfalse.

Pgina9de12

IntroduccinaGoogleMaps

Tambin hemos cargado en la etiqueta <head> el script googlemaps.js que es donde est
nuestro cdigo javascriptparacargar el mapa.Enla etiqueta<body>tenemosunelementoDIV
con el id map que ser nuestro contenedor, para nuestro mapa ya que la API nos pide un
contenedordondeinsertarelmapa.
Nuestro elemento DIV que contendr nuestromapa,necesitaunaalturayunancho paraqueel
mapa sea mostrado, por eso en el archivo CSS llamado:style.css hemos definidosu altura y
anchoal100%paraqueocupetodalapantalla.
Enelarchivogooglemaps.jsestamosusandoeleventoreadydejquery,paracargarelmapa.
Este evento nospermiteejecutarnuestrocdigocuandoelDOMestlisto.Acontinuacinvoy a
explicarelcdigojavascriptdelarchivogooglemaps.js.
Lo primero quenecesitamos hacer es definirlasopcionesparanuestromapa,lascualessern
pasadas como parmetro de otro modo el mapa no aparecer. Para crear las opciones de
nuestro mapa, primero tenemos que leer cules son las opciones disponibles a usar. Esto lo
podemosverenladocumentacindelaAPIenesteLink.
El uso deGOOGLE.MAPS.NAMESPACE: Alleerladocumentacinpuedesnotarquetodoslos
mtodos y clases comienzan con google.maps. esto es una tcnica javascript llamada:
namespace quees usada para evitarcolisionesde nombredemtodosyvariablesconotros
scripts en tu aplicacin, es comnmente usada cuando tienes muchosscripts entuaplicacin
cargados.
Como puedes ver hay muchas opcionesquepodemos usarparanuestromapa,puedesleerlas
todas para que tengasunaideadelo quepuedeshaceryqueno.Lasopcionesdelmapatienen
quepasarsecomoparmetroen unobjetojavascript,ycadaopcindelmapatieneque seruna
propiedad de ese objeto. Esta parte es muy importante que larecuerdes porque a lo largo de
toda la documentacin, siempre se especifica que tipo de objeto tienes que usar o crear con
determinadaclase.
En la lista de opciones del mapa, puedes ver en la tabla las columnas tienen los nombre de:
Properties, Type y Description. Type nos indica que tipo objeto tenemos que usar en esa
propiedad.Estoesmuyimportante.
Para poder crear un mapa necesitamos como mnimo 3 opciones:center, zoom,
mapTypeId. Si consultas la documentacin, podrs encontrar los posibles valores de estas
propiedades.

Pgina10de12

IntroduccinaGoogleMaps

Para nuestro ejemplo, hemos creado las opciones del mapa con un objeto simple de esta
manera:
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Este objeto tiene 3 propiedades que son las opciones de nuestro mapa.Ahoralaspropiedades
center y mapTypeId tienen definidos otros objetos pero porque esto es as ? Bueno, si
consultamos nuevamente la documentacin y vemos el tipo de dato que requiere estas
propiedadesencontraremosesto:
center:LatLng
mapTypeId:MapTypeId
zoom:number
Nos dice que la propiedad center (lugar donde se centrar el mapa) tiene que ser de tipo
LatLng, pero Qu es un LatLng ? Bueno, en la documentacin podemos hacer click en el
nombre y nos llevar a la seccin de la API de la clase LatLng y los parmetros que se
necesitanparacrearelobjeto.
Entonces lo que necesitamos es crear un objeto LatLng para asignar a nuestra propiedad
center pero comosecrea?.Puesinstanciandola clase google.maps.LatLngypasandolelos
parametros requeridos que segn la documentacin en este caso dice que son : lat:number,
lng:number,siendoelterceroopcional.
LatLng(lat:number, lng:number, noWrap?:boolean)

Lat yLngsonlalatitudylongitudquedefinen unapositionenelmapausandoelsistemaWGS84.

Para crear posiciones siempre tenemosque saber estos datos de antemano. Ahorasabiendo
ladefinicindeestaclasepodemoscrearnuestroobjetodeestamanera:
center: new google.maps.LatLng(-34.397, 150.644)

De esta manera creamos nuestro objeto LatLng, aqu estoy usando la palabra new que es
usada enjavascript para crear instancias de objetos, loquesignificaquecreaunainstanciadel
objeto LatLng que define una posicin en el mapa, recuerda que en google Maps un punto
geogrficoenelmapaesdefinidoporsulatitudylongitudcomolovimosanteriormente.
Ahora pasamos a la propiedad mapTypeId , de nuevo si consultamos la documentacin de
mapTypeId ,podremos ver que este objeto son constantes definidas y segn ladocumentacin
Pgina11de12

IntroduccinaGoogleMaps

deGoogleMapssonlassiguientes:
1. ROADMAP:Muestralosmosaicosnormalesen2DpredeterminadosdeGoogleMaps.
2. SATELLITE:Muestraimgenesdesatlite.
3. HYBRID : Muestra una mezclade mosaicosfotogrficos y unacapademosaicospara
loselementosdelmapamsdestacados(carreteras,nombresdeciudades,etc.)
4. TERRAIN : Muestra mosaicos derelievefsicoparaindicarlaselevacionesdelterrenoy
lasfuentesdeagua(montaas,ros,etc.).
Simplemente tenemos que escoger cual de estas opciones queremos usar , escribindola
comopropiedaddelaclasegoogle.maps.MapTypeId,enestecasousaremos:
google.maps.MapTypeId.ROADMAP
Despus tenemosZoomquesimplementesegnladocumentacinesunnmerocomprendido
de 0 a 19 que determina el nivel de zoom en el mapa. Ok con esto terminamos con nuestras
opcionesahorapasamosalasiguientelneadecdigo.
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

Para crear nuestro mapa necesitamos crear un objeto mapa instanciando la clase
google.maps.Map y segun la documentacion tenemos que pasar como parametro el
contenedordondeaparecernuestromapaylasopcionesdelmapa:
Map(mapDiv:Node, opts?:MapOptions)

En este caso estamos pasando nuestro elemento DIV con el id=map y las opciones que
creamos anteriormente. Bueno y con solo esas lneas de cdigo bastar para crear nuestro
primermapaennuestraaplicacindeprueba.
En esta primera parte fui muy cuidadoso de ir paso a paso de como debes leer la
documentacin de la API espero que haber sido claro en qu partes de la documentacin
debemosponeratencinalahoradecrearnuestrosobjetosysaberqueson.

Esto fue solo un capitulo de ejemplo si te ha gustado puedes adquirir el libro completo en :
http://saulburgos.com/

Pgina12de12