Cómo crear y administrar eventos de Google Maps con JavaScript - Guía completa

Google Maps es una plataforma web que  hace posible explorar mapas, ubicando puntos de interés y encontrar direcciones de los distintos lugares del mundo.

Su  mayor ventaja es que permite  tres opciones de vista de mapas: normal, satélite y terreno.  Más adelante en este post te enseñaremos cómo manejar eventos en Google Maps, la cual es otra función poco conocida de esta app.

JavaScript es un lenguaje de programación, cuya última versión disponible se conoce como: ECMAScript. Resultando en un dialecto estándar para los desarrolladores o programadores. Dicho en lenguaje de programación posee una librería de eventos bastante amplia.

Si tomamos este lenguaje y le damos aplicación a las características que éste dispone. Además de incluirlo de forma práctica en el programa o aplicación mundialmente conocido como Google Maps.

Es simple trabajar con Google Maps;   cumple a la perfección su función y no  confunde  con adornos innecesarios, igualmente de una PC, en la que podemos revisar si alguien la esta utilizando remotamente

Google Maps  puede estar disponible para  dispositivos móviles a través de su aplicación.  Viene instalada de serie en los smartphones y tablets que usan Android, por lo tanto lo puede utilizar como un GPS portátil.

Se pueden llegar a hacer una gran cantidad de diversas actividades que resultan muy útiles para sus usuarios.

De esta manera y siguiendo con JavaScript, si deseas emprenderte en el mundo de la programación o escritura de códigos. Específicamente aquellos que se utilizan en JavaScript y su aplicación sobre los comandos de Google Maps. Entonces, esta guía te enseñara los principios básicos que necesitas.

Eventos que podemos utilizar en Google Maps

Para comenzar, en primer instancia, tenemos que conocer los eventos que tenemos a nuestra disposición. El API con el que vamos a trabajar utiliza el nombre de: google.maps.event para permitirnos utilizar dichos eventos. De igual manera, este nombre nos brinda métodos estáticos que se encargarán de “Escuchar”.

Si, estos métodos escucharán cuando ocurra un evento en específico a través de un controlador llamado: addListener(). Que como su nombre lo indica: add = Añadir y Listener = Escuchador. De modo que, al tener esto en consideración vamos a pasar a definir algunos de los eventos más importantes.

• En el caso de que se haga una modificación en el centro del mapa, el evento que debe, ser escuchado es: center_changed. El cual su nombre se traduce a: Center = Centro y Changed = Cambio / Cambiado.
• El evento conocido como: click será disparado en el momento en que el usuario realice un clic sobre la interfaz. Indiferentemente si este es sobre el mapa, sobre una ventanilla de información o sobre un marcador.
• En el momento en que el usuario desplace el mapa o lo arrastre hacer cualquier dirección, nuestro Listener activara el evento: drag.
• mousemove es el nombre que recibe el evento que será disparado en el momento que el usuario realice un movimiento de su ratón. Esto se llevará a cabo indiferentemente de la dirección oposición en el que se encuentre el ratón en la aplicación.
• Cada vez que el usuario despliegue un menú contextual del Document Objet Model (DOM). Será “escuchado” el evento conocido como: rigthclick. Haciendo alegoría a la acción de presionar el “botón derecho” de un ratón de computadora.
• zoom_changed o su traducción al español: Cambio de acercamiento, será elemento activado cuando el número establecido del “Zoom” cambie. Especificando que esta modificación de acercamiento sólo se puede utilizar en el mapa.

Todos los anteriormente mencionados, son los eventos más comunes e importantes para el desarrollo de las actividades en Google Maps.

Aun así existen otros eventos que se pueden añadir al código que son mucho más específicos. Y como es lógico, su escritura o sintaxis amerita conocimiento un poco más avanzados.

Manejando las herramientas expresadas en la lista anterior, sumándole una constante prácticas en el desarrollo de esta actividad.

En muy poco tiempo descubrirás la gran cantidad de cosas que puedes llegar a hacer con estas líneas de código. Esto se debe al valioso potencial que nos ofrece Google Maps, al extender sus funcionalidades.

Funciones claves de Google Maps 

Antes de aprender cómo manejar eventos con Google Maps, debemos tomar en cuenta las funciones de esta app

• La búsqueda de direcciones o lugares de interés.
• Visualizar los lugares de su interés tal y como son en realidad a través de Street View.
• Imprimir mapas, haciendo clic en imprimir ubicada en la barra de herramientas de su navegador.
• Compartir la URL de algún mapa con las personas que usted desee.
• Activar la localización de un GPS, desde un teléfono móvil, introduciendo la dirección en la que se encuentre y la dirección a la que le interesa llegar.
• Seleccionar  lugares cercanos, escriba lo que desea encontrar, para ubicar un lugar a visitar.
• Cualquier evento puede publicarse en Google Maps: juegos mercados, fiestas abiertas, etc

Esta última función de Google Maps es la menos conocida y la que compete detallar aquí. Esta función se logra gracias a su respetiva API, que es la que nos da la posibilidad de manejar eventos con Google Maps. El API está basado en Javascript, que también es un lenguaje de programación  orientado a eventos.

Cabe destacar que API, incorpora algunos eventos que no forman parte de Javascript, además es único y funciona en cualquier navegador.

API, en español significa Interfaces de programación de aplicaciones, siendo especificación formal acerca cómo un módulo de un software logra comunicarse e interactúa con otro.

Manejar los eventos en Google Maps, de la teoría a la práctica

Crear contraseñas, es tarea fácil para un Desarrollador WEB, pero el el tratamiento de eventos es muy sencillo, para extraer el punto donde usted ha hecho clic en el mapa.

Primero  tendrá que crear el mapa y añadirle a GEvent un escuchador de eventos (Event listener) para cuando se hace clic sobre el mapa.

var map = new GMap2(document.getElementById("map"));   
map.setCenter(new GLatLng(33,0),3);   
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP); 

GEvent.addListener(map, "click", tratamiento_clic);

Al añadir un evento para ser escuchado debe  proveer de tres parámetros:

1. El objeto del API sobre el que se tiene que escuchar el evento
2. El nombre del evento que desea detectar y hacer acciones cuando se haya captado.
3. El nombre de la función que se encargará de tratar el evento.

Ahora  debe codificar el comportamiento del mapa para cuando se haga clic en él, es decir, codificar la función

tratamiento_clic. 
function tratamiento_clic(overlay,point){
alert ("Hola amigo! Veo que estás ahí porque has hecho clic!");
alert ("El punto donde has hecho clic es: " + point.toString());
}

La función recibe un par de parámetros, que son el contexto en el que se ha detectado el evento.

A continuación,  otro ejemplo de desarrollo en el que se puede  hacer un mapa que tiene una marca. Pulsando en cualquier parte del mapa usted podrá reposicionar la marca a la posición donde se ha hecho clic.

El evento que que podrá   ver, es el click en el objeto map, de la clase GMap2. En este caso, se recuperará  el punto donde se ha hecho click para colocar la marca en ese punto.

Primero verá el código para crear el mapa con una marca:

var map = new GMap2(document.getElementById("map"));   
map.setCenter(new GLatLng(40,-4),3);   
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP); 

var point = new GPoint (-4,40);
var marker = new GMarker(point); 
map.addOverlay(marker);

Vea el sencillo código para detectar un evento de tipo click sobre el mapa:

GEvent.addListener(map, "click", function (overlay,point){
if (point){
marker.setPoint(point);
}
});

Se crea el escuchador de eventos, para el objeto map y el tipo de evento click, ejecutando una función que recibe dos parámetros (overlay,point). Recuerde que overlay es la marca sobre la que se ha pulsado, y point es el punto donde se ha hecho clic del mapa.

Ahora bien, Google Maps, ha incorporado  en su última versión  una función innovadora, que le facilita  crear eventos públicos.

Oficialmente no ha sido anunciada, está en etapa de experimentación, pero ya tiene  una página en la sección de ayuda de la aplicación.

Sólo está disponible en dispositivos Android, sin embargo también está  condicionada por la localización y rango de usted.

Cuya función la puede ubicar en las pestañas de «Contribución» y «Tus contribuciones» dentro de la aplicación. Una vez que haga hace click en la opción de «Crear evento público», la app le permitirá agregar los  detalles.

Podrá colocar el nombre del evento, lugar, hora, categoría, descripción, inclusive  podrá agregar el link a una web o fotos relacionadas con el evento. Como esta función está desarrollo, se tarda más de una hora en actualizar.