Volver al indice
Capítulo 1:Introducción
Introducción a Google Maps
En la actualidad, gran parte de las aplicaciones web requieren el uso de tecnología de mapas, para mostrar direcciones, ubicar localidades, mostrar rutas, ubicaciones en tiempo real, etc… Cualquier ubicación puede ser localizada en el mapa que nosotros queramos mostrar al usuario en nuestro sitio.
Google Maps: Nos ofrece todo el poder de su API para que nosotros podamos crear mapas de manera fácil, confiable y sobre todo multiplataforma. Nuestro mapa puede ser visto desde cualquier dispositivo sea tablet, smartphone o desktop, gracias a los nuevos estándares HTML 5, Javascript, CSS3.
En este libro nos enfocaremos en Google Maps API con Javascript.
Recomendaciones antes de empezar con Google Maps
Estas recomendaciones son basadas en mi propia experiencia y viendo a compañeros de trabajo que iniciaron por primera vez con Google Maps, después de leer estas recomendaciones quizás pienses que necesitas aprender muchas cosas antes de empezar Google Maps. Pero déjame decirte que son sólo recomendaciones de mi parte, que vale la pena saber antes de iniciar con Google Maps. Pero, es posible aprender a usar Google Maps sin saber algunas de ellas.
Javascript: Ok esto es más que obvio, ya que en este libro veremos la Google Maps API basado en javascript, me gustaría hacer énfasis en algunos puntos que considero importantes que debes manejar con javascript.
- Arreglos: Debes saber como trabajar con arreglos, esto es importante porque la mayoría del tiempo tendrás que iterar sobre los elementos, agregar elementos, eliminar elementos y modificar elementos de un arreglo.
- Programación orientada a objeto: Javascript es un lenguaje orientado objeto, por esta razón debes de saber que es un método, una propiedad, que es el tipo de datos objeto, de como instanciar una clase y el uso de prototype.
- 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 nuestros ejemplos todo el tiempo.
- AJAX (Asynchronous JavaScript And XML) Es importante saber el concepto de AJAX, de como funciona y para qué sirve.
- Saber leer una API: Esta una de las partes que me tocará explicar un poco, el primer problema que encontré cuando comencé con Google Maps, es que no sabía cómo leer la documentación de una API y el mismo problema lo visto en otras personas continuamente. Esto puede ocasionar que el desarrollador se frustre muy fácil desde el inicio. Un gran problema a veces con las API es la pobre y mal organizada documentación en los sitios webs que terminan confundiendo más al desarrollador. En este punto tengo que hacer notar, que la documentación 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 documentación de Google Maps, mi objetivo con esto es que aprendas a leer la documentación de la API, ya que considero que este es un problema muy común entre las personas que inician con esta herramienta.
- Jquery: Este es uno de lo frameworks más populares de Javascript, saber como usarlo es una enorme ventaja.
- En los ejemplos de este libro estamos usando variables globales, para almacenar valores. Aunque en proyectos pequeños esto no tiene importancia es considerado una mala práctica de programación en javascript. En un proyecto de considerable tamaño esto puede ser un caos, por esa razón sugiero que aprendes un poco de “Namespacing”
HTML, CSS: Como todo buen desarrollador tienes que saber de HTML, CSS que vendría siendo algo básico para construir aplicaciones web.
Debugger Javascript: En toda aplicación siempre habrá errores en nuestro código, ya sea errores de sintaxis ó errores lógicos. Saber cómo descubrirlos es una parte vital para salir adelante, por eso recomiendo que sepas lo mínimo para debugear tu código javascript. En este libro estaremos usando el modo consola de Google Chrome, pero tú puedes usar el navegador que quieras en su modo debugger. Si nunca haz usado el modo consola de un navegador te recomiendo este link donde puedes aprender a usar modo consola de Google Chrome.
Editor de texto: Como editor de texto para los archivos yo recomiendo que uses notepad++, pero puedes usar con el que estes mas comodo.
¿ Comó funciona está cosa llamada Google Maps ?
Recuerdo la primera vez que vi un mapa de Google Maps, pense que era los más increíble que había visto con respeto a mapas, pero la mayoría de las cosas en este mundo tiene su explicación.
Google Maps: Es un conjunto de códigos: HTML, javascript y CSS. Trabajando juntos con cada una de las secciones del mapa, puedes notar que son cargadas cuando te mueves o haces zoom en el mapa. Esto ocurre mediante el métodos AJAX y después son insertadas en un elemento <DIV> basado en coordenadas del mapa.
La API de Google Maps es un conjunto de clases con métodos y propiedades que pueden ser usadas para manipular el mapa como tu quieras.
Fundamentos Básicos sobre coordenadas
Para poder trabajar con la API necesitamos primero conocer el sistema de coordenadas que usa Google Maps. La cual es WGS84 el mismo usado en los sistema GPS, estas coordenadas son expresadas en Latitud que representa el valor “Y” y Longitud que representa “X”.
La latitud se mide de sur a norte y longitud se mide de oeste a este. En el ecuador la latitud es 0, esto nos indica, que todo lo que esta arriba del ecuador será un valor positivo y lo que esta abajo de él, será un valor negativo. Lo mismo pasa con longitud, pero está localizado en el Meridiano de Greenwich lo que se encuentra al este será un valor positivo y al oeste un valor negativo. En la siguiente imagen podemos verlo claramente.
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 son en decimales separados por coma.
Ejemplo : 38.97 , -1.23.
Cómo leer la documentación de la API
La documentación de Google Maps por lo general sigue la siguiente estructura para los metodos:
Map(mapDiv:Node, opts?:MapOptions)
Lo primero es el nombre del método, después entre los paréntesis se encuentran los parámetros del método. En los parámetros, el nombre que va antes de los 2 puntos “:” es un nombre descriptivo para el parámetro solamente y lo que esta despues de los 2 puntos “:” es el tipo de variable el cual debe ser el parámetro. Si existe un signo de interrogación en el nombre descriptivo del parámetro, quiere decir que es un parámetro opcional.
Los tipo de datos primitivos javascript son descritos por ellos mismo por ejemplo : string, boolean , number. Pero los arreglos y MVCArray son descritos de una manera distintas.
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 específico de Google Maps.
MVCArray.<MapType> : Esto quiere decir que el valor de esta propiedad es un MVCArray que contiene objetos del tipo “MapType”.
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 algún método, clase o constante de la API, tienes que escribir siempre primero “google.maps.” seguido por lo que quieras usar. Por ejemplo aquí estamos usando la clase LatLng:
new google.maps.LatLng();
