martes, 12 de enero de 2016

Libro Google maps Javascript - Capítulo 2: Jugando con las opciones de mapa

Volver al indice

Jugando con las opciones de mapa

En la sección anterior vimos como crear un simple mapa , ahora vamos a jugar con algunas de las opciones que nos ofrece la API de Google Maps. En este libro veremos algunas de las opciones más comunes en el uso de mapas, pero aliento al lector a explorar las opciones restantes por tu propia cuenta.

Deshabilitar la Interfaz por completo

disableDefualtUI: Pasando esta propiedad a true podemos deshabilitar todo control visual en nuestro mapa.

var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP ,
      disableDefaultUI: true
};
var map = new google.aps.Map(document.getElementById("map"), mapOptions);

Configurar como mostrar los tipos de mapa

Con la propiedad llamada “mapTypeControlOptions” podemos controlar los tipos de mapa a seleccionar y su position en la interfaz. Esta propiedad toma como valor un objeto del tipo: MapTypeControlOptions y de acuerdo a la documentación este objeto tiene 3 parámetros : mapTypeIds , position , style. Al usar esta propiedad debemos poner mapTypeControl del objeto mapa a true. A continuación veremos algunos ejemplos.

Style : Esta propiedad determina la apariencia del control y su valor tiene que ser del tipo MapTypeControlStyle, las cuales son constantes definidas en la clase. Para poder usar estas constantes solo tenemos que usar el nombre la clase “google.maps.MapTypeControlStyle.” y al final el nombre usar la constante que usaremos. por ejemplo:

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

Puedes probar los diferentes valores de las constantes y ver los resultados en el mapa.

Position : Por defecto el control de tipos de mapa siempre esta arriba a la derecha, pero podemos cambiar la position con esta propiedad, pasando como valor una de las constantes de ControlPosition . Alguno de los valores que podemos usar son :

https://google-developers.appspot.com/maps/documentation/javascript/examples/full/control-positioning-labels

Por ejemplo podemos usar :

var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP ,
    mapTypeControl: true,
    mapTypeControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER
        }
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

mapTypeIds : Esta propiedad te permite elegir que tipos de mapa podrá el usuario elegir en la interfaz, el valor que necesitamos pasar a esta propiedad será un arreglo donde cada elemento será un tipo de datos MapTypeId . Por ejemplo el siguiente codigo solo mostrará 2 tipos de mapas al usuario:

var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP ,
    mapTypeControl: true,
    mapTypeControlOptions: {
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.SATELLITE
        ]
    }
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

Ahora vamos a poner todos estos códigos juntos:

var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP ,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        position: google.maps.ControlPosition.TOP_CENTER ,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.SATELLITE
        ]
    }
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

Control de navegación

Los controles de navegación por defecto están situados al lado izquierdo del mapa. Son para controlar el zoom, pan y el pegman ( hombrecito color naranja ) de streetview.

Podemos mostrar ó ocultar estos controles con las siguientes propiedades : panControl, streetViewControl y zoomControl. Todas estas propiedades reciben un valor booleano para ser mostradas en la interfaz. Por ejemplo :

var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP ,
    panControl : false ,
    streetViewControl : false ,
    zoomControl : false
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

keyboard Shortcuts

Esta propiedad habilita / deshabilita el uso del teclado para controlar nuestro mapa por ejemplo las teclas + / - para controlar el zoom del mapa.

var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP ,
    keyboardShortcuts : false
};

disableDoubleClickZoom

Esta propiedad controla el doble click sobre el mapa que ejecuta un zoom sobre el mapa.

var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP ,
    disableDoubleClickZoom : true
};

draggable

Esta propiedad controla si podemos arrastrar el mapa con nuestro mouse.

var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP ,
    draggable : false
};

scrollwheel

Esta propiedad controla el uso de scroll para hacer zoom en el mapa.

var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP ,
    scrollwheel : false
};

streetViewControl

Esta propiedad esconde o muestra los controles para el streetview comúnmente conocido como “pegman”.

var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP ,
    streetViewControl : false
};

Las propiedades panControl, streetViewControl y zoomControl. También tiene sus propias opciones donde podemos controlar la posición en donde queramos que aparezcan usando los siguientes objetos: panControlOptions , streetViewControlOptions , zoomControlOptions de la misma manera como lo hicimos anteriormente con el control de tipos de mapa, usando la clase google.maps.ControlPosition .

Hasta aquí hemos visto algunas de las opciones que podemos configurar para nuestro mapa , invito al lector a explorar las restantes de la API.

Crear controles personalizados

Los controles por defecto de Google Maps cumplen con su propósito básico, pero habrá ocasiones en el que queremos tener nuestros propios controles con un estilo visual distinto, acorde con el diseño de nuestra página web. Para lograr esto necesitamos crear controles personalizados e insertarlos en el mapa.

El proceso de crear controles personalizados es el mismo que maquetar un formulario HTML normal, creando los controles con HTML, aplicar estilo con CSS y luego insertarlos dentro del mapa, los cuales flotaran dentro del viewport del mapa. Los controles personalizados tienen que estar dentro de elemento <DIV> antes de ser insertados. En el siguiente ejemplo hemos creado un pequeño formulario, el cual nos dará una idea de lo que podemos hacer.

Podemos abrir el archivo de ejemplo de la carpeta número “1-2”. Si ejecutamos el archivo “index.html” podremos ver nuestro mapa cargado y del lado derecho veremos un panel de color verde con un pequeño formulario.

Para agregar este formulario al mapa primero tiene que ser creado con HTML y tener sus estilos definidos en CSS antes de ser insertado. Algo que tienes que tener en cuenta es que la API de Google Maps tiene sus propios estilos CSS para la UI del mapa, por lo que tienes que estar alerta si algunos de tus estilos son sobreescritos por la API. En el archivo “style.css” de nuestro ejemplo podrás ver los estilos usados para el formulario.

Anteriormente dije que el formulario tiene que ser creado antes de ser insertado en el mapa ojo aquí, solamente creado y no insertado en el DOM de la página web ya que de la inserción se hará cargo Google Maps por nosotros luego.

Ahora podemos abrir el archivo “googlemaps.js” donde podemos ver que existe una variable llamada “htmlForm” a la cual le estamos asignando nuestro código HTML del formulario como una cadena de texto.

var htmlForm = '<div class="customControl">' +
            '<div>' +
                '<b>Place Name</b>' +
                '<input type="text" />' +
            '</div>' +
            '<hr>' +
            '<div>' +
                '<b>Rooms</b>' +
                '<input type="number" name="quantity" min="1" max="10">' +
            '</div>' +
            '<hr>' +
            '<div>' +
                '<b>Activity</b><br>' +
                '<input type="radio" name="activity" value="male"        checked>Rent' +
                '<input type="radio" name="activity" value="female">Sell' +
            '</div>' +
            '<hr>' +
            '<div>' +
                '<b>Description</b><br>' +
                '<textarea rows="4" cols="16"></textarea>' +
            '</div>' +
            '<input type="checkbox" name="call" value="money">Only adults' +
            '<button id="saveForm">Save location</button>' +
        '</div>';

El contenido de “htmlForm” es una cadena de texto que será parseada usando Jquery para crear los elementos HTML con las siguientes lineas de código:

var controlDiv = document.createElement('div');
controlDiv.className = 'container';
$(controlDiv).append(htmlForm);

Aquí lo primero que hacemos es crear el elemento DIV que contendrá nuestro formulario por medio de javascript y usando el método “append” de Jquery agregamos el formulario al elemento DIV creado. En este ejemplo hemos creado nuestro formulario parseando una cadena de texto HTML. Pero si lo prefieres puedes crear los elementos con puro javascript para luego agregarlos al DIV contenedor. Ahora podemos agregar nuestro formulario al mapa:

var map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.controls[google.maps.ControlPosition.RIGHT_CENTER ].push(controlDiv);

Los controles personalizados son colocados usando la propiedad “controls” del objeto mapa , esta propiedad contiene un arreglo de posiciones de “google.maps.ControlPosition” , en las cuales podemos insertar nuestro formulario, solo tenemos que agregar nuestro elemento DIV al arreglo usando el método “push” de javascript en la posición deseada definida en la API y Google Maps automáticamente insertará nuestro formulario. Y si removemos nuestro elemento del arreglo será eliminado del mapa también. Para los eventos de los botones puedes usar Javascript de modo normal.

Metodos de nuestro objeto mapa.

Hasta el momento hemos creado nuestro mapa pasando como parámetro las opciones en una variable llamada “mapOptions”, donde cada propiedad ha sido previamente configurada. Pero también tenemos a nuestra disposición métodos muy útiles del objeto mapa que podemos usar para cambiar las opciones en cualquier momento durante la ejecución de nuestra aplicación.

La API de Google Maps ofrece una serie de métodos para cambiar el comportamiento de nuestro mapa cuando nosotros queramos. A continuación veremos algunos métodos de los más comunes del objeto mapa.

En esta sección usaremos los archivos de ejemplo que están en la carpeta ”2” si abres el index.html podrás ver el mapa a la derecha y un botón al lado izquierdo llamado “Click me”. Este botón tiene un evento click de Jquery donde ejecutaremos los códigos de ejemplo que veremos a continuación.

Si abres el archivo “googlemaps.js” debes de notar que al inicio del archivo he definido Fuera del evento ready de Jquery.

var map;

Esto es para hacer la variable “map” global y poder acceder a ella desde cualquier lugar de mi aplicación y usar sus métodos en cualquier momento.

Por esta razón debes copiar dentro del evento click del botón, cada fragmento de código que quieras ver en acción de los siguientes ejemplos que veremos.

setOptions()

Este método es usado para cambiar o asignar nuevas opciones en nuestro mapa . Como se puede ver en la documentación recibe como parámetro un objeto con las opciones a configurar.

Por ejemplo : vamos a cambiar el zoom y el tipo de mapa.

$('#actionButton').on('click',function() {
      var newOptions = {
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    map.setOptions(newOptions);
});

Ahora si damos click en el botón “click me” veremos como el zoom y el tipo de mapa son cambiados. Este método puede ser usado para cambiar cualquiera de las opciones del objeto mapa en cualquier momento.

getZoom() y setZoom()

Como se puede leer los metodos de Google Maps son bien descriptivos por si solos. Por ejemplo: getZoom y setZoom().

getZoom() : obtiene el zoom actual del mapa.

setZoom() : asigna un zoom específico.

setZoom() segun la documentacion recibe como parámetro un número que vendría siendo el zoom deseado

Ejemplo:

$('#actionButton').on('click',function() {
    alert(map.getZoom());
      map.setZoom(13);
});

Este ejemplo mostrará en el alert el zoom del mapa que tiene en ese momento y después lo cambiara a 13.

getCenter() y setCenter()

Siempre es importante saber como centrar el mapa en cualquier momento con los siguientes métodos puedes lograrlo.

getCenter() : Obtiene el centro del mapa y devuelve un objeto latLng.

setCenter() : Asigna un nuevo centro al mapa, recibe como parámetro un objeto latLng.

Ejemplo:

$('#actionButton').on('click',function(){
    alert(map.getCenter());
    var newCenter = new google.maps.LatLng(-33.728, 151.049);
    map.setCenter(newCenter);
});

Si hacemos click en el botón veremos como nuestro alert muestra el centro actual del mapa , para después asignar un nuevo centro , automaticamente Google Maps mueve nuestro visor a ese punto. Hay que notar que para asignar el nuevo centro primero tuve que crear un objeto latLng para poder pasarlo como parámetro al método setCenter() .

getMapTypeId() y setMapTypeId()

Con estos métodos podemos saber cual es el tipo de mapa actualmente y asignar uno nuevo.

Ejemplo:

$('#actionButton').on('click',function(){
    alert(map.getMapTypeId());
    map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
});

Ok hasta aquí hemos visto los métodos básicos para manipular nuestro mapa, pero como puedes ver en la documentación de la API existen muchos más que podemos usar. Mientras avancemos en el libro usaremos algunos de estos métodos en los ejemplos siguientes .

Creo que una aclaración válida sobre la creación de un objeto latLng, es cuántos decimales usar para crear nuestro objeto. Según este link para los usos comunes esta bien usar 4 o 3 decimales , recuerda que el máximo que puedes usar es de 5 a 6 decimales.

Libro Google maps Javascript - Capítulo 2: Conceptos básicos

Volver al indice

Capítulo 2: Conceptos básicos

Creando tu primer mapa

Lo primero que necesitamos para crear nuestro primer mapa, según la documentación de Google Maps es obtener una “API Key” para poder acceder a la API. Aunque es posible, usar la API sin una API KEY es recomendable que uses tu propia API KEY en tus proyectos.

Por motivos de práctica, en este libro no usaremos una API KEY. Pero recomiendo que consigas una, cómo lo recomienda google en este Link.

Antes de crear nuestro mapa necesitamos crear una página web sencilla, que incluya el CSS y Javascript necesarios. En esta práctica usaremos los archivos de práctica de la carpeta número “1”, donde encontrarás los archivos necesarios para ver el ejemplo funcionando. A continuación explicaré el código.

En nuestra carpeta de ejemplo tenemos 3 archivos llamados: index.html, googlemaps.js, style.css, estos son los archivos que componen nuestra aplicación:

index.html: Aquí tenemos el DOM de nuestra aplicación, si abres el archivo podrás ver, que es bastante simple, el cual tiene un DOCTYPE de HTML 5. En la sección <head> tenemos los archivos CSS y Javascript que usa la aplicación, también está cargado el framework javascript Jquery, que es usado a lo largo de este libro.

Esta es la parte más importante:

Con este script cargamos la API de Google Maps, para poderla usar en nuestro proyecto. En la URL existe un parámetro llamado: “sensor” y tiene el valor “false” esto es para indicarle a nuestro mapa, si nuestra aplicación usa algún dispositivo tipo GPS para determinar nuestra posición. Este parámetro es obligatorio y debe de ser “true” o “false”, en nuestro caso será “false”. Addicional a estos pasos recomiendo leer este link

También hemos cargado en la etiqueta <head> el script “googlemaps.js” que es donde está nuestro código javascript para cargar el mapa. En la etiqueta <body> tenemos un elemento DIV con el id “map” que será nuestro contenedor, para nuestro mapa ya que la API nos pide un contenedor donde insertar el mapa.

Nuestro elemento DIV que contendrá nuestro mapa, necesita una altura y un ancho para que el mapa sea mostrado, por eso en el archivo CSS llamado:“style.css” hemos definido su altura y ancho al 100% para que ocupe toda la pantalla.

En el archivo “googlemaps.js” estamos usando el evento “ready” de jquery, para cargar el mapa. Este evento nos permite ejecutar nuestro código cuando el DOM está listo. A continuación voy a explicar el código javascript del archivo “googlemaps.js”.

Lo primero que necesitamos hacer es definir las opciones para nuestro mapa, las cuales serán pasadas como parámetro; de otro modo el mapa no aparecerá. Para crear las opciones de nuestro mapa, primero tenemos que leer cuáles son las opciones disponibles a usar. Esto lo podemos ver en la documentación de la API en este Link.

El uso de GOOGLE.MAPS.NAMESPACE: Al leer la documentación puedes notar que todos los métodos y clases comienzan con “google.maps.” esto es una técnica javascript llamada: ”namespace” que es usada para evitar colisiones de nombre de métodos y variables con otros scripts en tu aplicación, es comúnmente usada cuando tienes muchos scripts en tu aplicación cargados.

Como puedes ver hay muchas opciones que podemos usar para nuestro mapa, puedes leerlas todas para que tengas una idea de lo que puedes hacer y que no. Las opciones del mapa tienen que pasarse como parámetro en un objeto javascript, y cada opción del mapa tiene que ser una propiedad de ese objeto. Esta parte es muy importante que la recuerdes porque a lo largo de toda la documentación, siempre se especifica que tipo de objeto tienes que usar o crear con determinada clase.

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. Esto es muy importante.

Para poder crear un mapa yo recomiendo usar como mínimo 3 opciones:“center”, “zoom”, “mapTypeId”. Si consultas la documentación, podrás encontrar los posibles valores de estas propiedades.

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. Ahora las propiedades center y mapTypeId tienen definidos otros objetos pero ¿ porque esto es así ? Bueno, si consultamos nuevamente la documentación y vemos el tipo de dato que requiere estas propiedades encontraremos esto:

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 documentación podemos hacer click en el nombre y nos llevará a la sección de la API de la clase LatLng y los parámetros que se necesitan para crear el objeto.

Entonces lo que necesitamos es crear un objeto LatLng para asignar a nuestra propiedad center pero ¿ como se crea ?. Pues instanciando la clase google.maps.LatLng y pasandole los parametros requeridos que según la documentación en este caso dice que son : lat:number, lng:number , siendo el tercero opcional.

LatLng(lat:number, lng:number, noWrap?:boolean)

Lat y Lng son la latitud y longitud que definen una position en el mapa usando el sistema WGS84. Para crear posiciones siempre tenemos que saber estos datos de antemano. Ahora sabiendo la definición de esta clase podemos crear nuestro objeto de esta manera :

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 en javascript para crear instancias de objetos, lo que significa que crea una instancia del objeto LatLng que define una posición en el mapa, recuerda que en google Maps un punto geográfico en el mapa es definido por su latitud y longitud como lo vimos anteriormente.

Ahora pasamos a la propiedad mapTypeId , de nuevo si consultamos la documentación de mapTypeId ,podremos ver que este objeto son constantes definidas y según la documentación de Google Maps son las siguientes :

ROADMAP : 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.).

Simplemente tenemos que escoger cual de estas opciones queremos usar , escribiéndola como propiedad de la clase “google.maps.MapTypeId”, en este caso usaremos :

google.maps.MapTypeId.ROADMAP

Después tenemos Zoom que simplemente según la documentación es un número comprendido de 0 a 19 que determina el nivel de zoom en el mapa . Ok con esto terminamos con nuestras opciones ahora pasamos a la siguiente línea de código.

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 contenedor donde aparecerá nuestro mapa y las opciones del mapa:

Map(mapDiv:Node, opts?:MapOptions)

En este caso estamos pasamos nuestro elemento DIV con el id=”map” y las opciones que creamos anteriormente. Bueno y con solo esas líneas de código bastará para crear nuestro primer mapa en nuestra aplicación de prueba.

En esta primera parte fui muy cuidadoso de ir paso a paso de como debes leer la documentación de la API espero que haber sido claro en qué partes de la documentación debemos poner atención a la hora de crear nuestros objetos y saber que son , apartir de aqui no volveré a ser tan descriptivo solo mencionare el tipo de objeto que necesitamos usar en nuestro código y consultando la documentación deberías deberías de saber que necesitas para crearlo y sus parámetros necesarios.

martes, 5 de enero de 2016

Libro Google maps Javascript - Capítulo 1

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();

Libro Google maps Javascript - Introduccion

Volver al indice

Introducción

Este libro nació a raíz de la poca documentación que existe sobre cómo usar los mapas de google. Quiero compartir mi experiencia de más 5 años de tiempo completo, que he dedicado al desarrollo de mapas con la API de Google Maps. Esto, con el objetivo de que el lector sea capaz de asimilar los conceptos básicos y técnicas necesarias, para crear sus propios mapas en sus proyectos web. En el libro haremos uso de la versión 3.22 que está disponible actualmente, durante el desarrollo del libro.

También, quiero agradecer a mi familia por brindarme su apoyo en el proceso de este libro, especialmente a mi madre que siempre me estuvo apoyando en todo.

Para quién es este libro

Este libro está orientado principalmente a desarrolladores/diseñadores web, quienes desean aprender como crear sus propios mapas para sus proyectos web. No te preocupes, si no estas entre estas áreas; el objetivo del libro es ayudarte a comprender desde lo más básico de la API de Google Maps. Aunque tener cierta experiencia y conocimientos básicos sobre programación web serán una gran ventaja.

Acerca del autor

Mi nombre es Saúl Burgos Dávila, soy ingeniero en computación y trabajo como desarrollador de aplicaciones web, desde hace 5 años a tiempo completo. En mi actual empleo desarrollo aplicaciones web que 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 de mis herramientas favoritas de desarrollo. La cual complemento con sólidos conocimientos de Javascript y el uso de tecnologías libres, buscando siempre cumplir con los estándares web de la actualidad.

Enfocado principalmente en el desarrollo front-end, estoy en la constante exploración de nuevas tecnologías libres, que me permitan crear aplicaciones web robustas y sólidas. Herramientas que me permitan abstraerme de los complicados tecnicismos de los lenguajes de programación, para enfocarme en una experiencia de usuario limpia y simple.