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 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
    }
};

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.

Suscribete para recibir mis ultimas noticias