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.