Los mapas generados con el API de Javascript de Google Maps no siempre serán estáticos, si bien son utilizados la mayoría de las veces para la visualización esto no es siempre el caso, es por ello que algunas veces existirán ocasiones en que vamos a necesitar expandir el alcance de los mismos para que puedan mostrar información adicional en ellos.
Esta información adicional que necesitamos incluir lo logramos con los vectores que no son más que formas que consisten en puntos, donde todos los tipos de vectores utilizados por el API son llamados overlays o de superposición.
Habiendo pasado por el tutorial recomendado y ya estando en contexto pasemos a la realización de los ejemplos prácticos, esto para el mejor entendimiento de la utilización de los vectores en nuestros mapas generados con el API.
El uso de los mapas generados con el API se concentra la mayoría de las veces en sitios web donde su función principal es mostrar la localización de una compañía o negocio. A esto le podemos llamar un punto de interés que lo podemos representar sin ningún problema con un tipo de vector, el cuál para efectos del API de Javascript de Google Maps es conocido como marcador.
Sin más, veamos los pasos que debemos seguir para implementar un marcador estándar y adicionalmente uno personalizado en nuestro mapa.
1- Lo primero que debemos hacer es incluir el API y los estilos para la visualización de nuestro mapa, es importante destacar que debemos utilizar nuestra credencial de desarrollador de Google para el correcto funcionamiento de este ejemplo:
2- Definimos nuestras variables globales, una llamada mapa y una serie de variables que utilizaremos para generar marcadores aleatorios de acuerdo a coordenadas que rodean la zona de Madrid.:
3- Luego definimos la función de inicialización de nuestro mapa, la cual contendrá las opciones más importantes para el mismo como zoom, tipo de base para el mapa y las coordenadas centrales que en este caso serán las de Madrid, obtenemos el ID del div por el DOM, inicializamos el mapa y definimos una función para manejar los eventos cuando posicionemos los marcadores en el mapa, veamos el segmento de código que acabamos de describir:
4- Ahora debemos construir nuestra función eventosMarcador() el cual tendrá en su definición dos eventos atados por click de acuerdo al ID que se pulse de dos enlaces diferentes y que llamarán a dos funciones más que serán las encargadas de fijar los marcadores:
5- Antes de construir las dos funciones que fijaran los marcadores es importante realizar algo de trabajo sobre las coordenadas para que nos proporcionen valores aleatorios en ese rango y las mismas puedan ser interpretadas por el API de Javascript de Google Maps, esto lo realizaremos con algunas operaciones aritméticas sobre las variables globales de las coordenadas, veamos la función correspondiente:
6- Hecho esto, podemos construir nuestras funciones para fijar los marcadores a nuestro mapa, para ello lo hacemos con el método Marker para generar un marcador estándar y con la función anterior generamos la coordenada aleatoria donde será desplegado el mismo:
Antes de pasar a nuestro marcador personalizado es importante mencionar que el mismo es basado en iconos y estos deben estar disponible en el directorio de nuestro proyecto, para este ejercicio se utilizaron algunos de los iconos gratuitos disponibles en la página de mapicons bajo la categoría markers, por lo que nos funcionarán sin ningún problema, para ello nos descargamos algunos y los colocamos en una carpeta llamada img ubicada en la raíz de nuestro proyecto como podemos ver en la siguiente imagen:
![vectores-google-maps.jpg]()
7- Luego de tener nuestros iconos solo debemos construir nuestra función, para ello creamos un array con los nombres de nuestros iconos y los vamos a recorrer de manera aleatoria, dándole un parámetro adicional a nuestro método Marker llamado icon el cual utilizara la imagen descargada para fijar el marcador:
8- Por último agregamos el evento para inicializar nuestro mapa y creamos dos enlaces antes de nuestro div con los ID que definimos para nuestros eventos que llamarán a las funciones correspondientes:
Con esto ya tenemos nuestro mapa con la funcionalidad de poder agregar marcadores estándar y personalizados de acuerdo a lo que seleccionamos, es importante mencionar que podemos agregar tantos marcadores como deseemos esto nos permitirá ver el funcionamiento del API, para finalizar veamos como luce cuando lo ejecutamos en nuestro navegador:
![vectores-google-maps2.jpg]()
En todas las aplicaciones que nos encontramos en la web que despliegan un mapa, no descartan la posibilidad de mostrar información relacionada al punto que están señalando, es por ello que tenemos la posibilidad de agregar un popup o ventana desplegable para mostrar información de acuerdo a una cierta posición en nuestro mapa o incluso un marcador, veamos cómo podemos hacer esto:
1- Vamos a crear un nuevo archivo agregar_popup.html y utilizaremos como base el ejemplo anterior para insertar las nuevas funcionalidades, para ello copiamos y pegamos el código de nuestro mapa y vamos a localizar la función inicializarMapa() donde luego de obtener el ID vamos a definir con el método InfoWindow el popup para el centro de nuestro mapa, veamos el código para la funcionalidad mencionada:
2- Ahora vamos a modificar nuestra función agregarMarcador() para agregarle un popup a cada marcador que aparezca en nuestro mapa, para ello utilizaremos de nuevo la función InfoWindow() y agregaremos un evento para la variable que definimos con la instancia del método, veamos:
3- Hecho esto veamos como luce nuestro mapa con la funcionalidad del popup que acabamos de incluir:
![vectores-google-maps3.jpg]()
4- Por últimos veamos la funcionalidad similar que le aplicamos a nuestros marcadores, esto lo hacemos presionando el enlace de Agregar Marcador:
![vectores-google-maps4.jpg]()
Como pudimos ver extender la funcionalidad de nuestros mapas y los marcadores es bastante sencillo solo debemos usar los métodos adecuados para lograrlo.
Ya hemos comprobado el poder de los vectores mostrando los puntos de interés en un mapa con los marcadores, sin embargo podemos usar los vectores para dibujar líneas y mostrar la ruta entre dos puntos de nuestro mapa, veamos como lo logramos:
1- Vamos a crear un archivo llamado agregar_linea.html y vamos incluir nuestro API así como los estilos del primer ejemplo, ahora vamos a definir las coordinadas que van desde Madrid a Barcelona, veamos:
2- Antes de pasar a la función de inicialización de nuestro mapa vamos a crear primero la función agregarLinea() donde lo primero que vamos a hacer es iterar sobre el array de las coordenadas y crear un nuevo array que contendrá un objeto de tipo LatLng, veamos:
3- Luego seteamos las propiedades para nuestra línea, como color, opacidad y grosor. Después de hacer esto solo necesitamos enviar al método Polyline las opciones como parámetro y setear la variable polyline al mapa actual:
4- Por último creamos nuestra conocida función inicializarMapa() y en vez de tener una función llamada eventosMarcador al final de la misma vamos a sustituir esta línea por el nombre de nuestra función agregarLinea(), creamos nuestro HTML y ejecutamos en nuestro navegador, debe verse de la siguiente forma:
![vectores-google-maps5.jpg]()
En el ejemplo anterior agregamos una línea a nuestro mapa y así demostramos la unión de dos puntos para demostrar la ruta entre estos, sin embargo este ejemplo a pesar de ser ilustrativo le falta algo todavía y es el hecho de mostrar movilidad entre estos dos puntos, como por ejemplo un automóvil desplazándose.
Esto puede sonar bastante complicado pero no lo es, con la ayuda de las clases y métodos del API podemos resolverlo con unas cuantas líneas de código, veamos como lo hacemos:
1- Lo primero es incluir nuestro API, nuestros estilos y definimos nuestras variables globales, usamos las mismas coordenadas del ejemplo anterior para usar la misma ruta, adicionalmente definimos la variable polyline como global para poderla usar en todo el alcance de nuestro Javascript:
2- Ahora creamos nuestra función agregarLineaAnimada() que tendrá una estructura similar a la función agregarLinea() del ejemplo anterior, sin embargo esta función tendrá la definición del símbolo que usaremos para mostrar el objeto en movimiento entre estos dos puntos, para este caso utilizaremos una flecha:
3- Por último solo debemos fijar esta variable a la opción icons de la definición de la línea:
4- Hecho esto, solo nos falta animar nuestro ícono y esto lo hacemos en la función llamada animarFlecha() la cual debemos incluir al finalizar la definición de la función agregarLineaAnimada() veamos que contiene la función:
5- Para finalizar inicializamos nuestro mapa como ya sabemos y llamamos a nuestra función agregarLineaAnimada(), veamos al ejecutar como luce en nuestro navegador, es importante mencionar que la flecha posee un efecto de moverse de punto a punto:
![vectores-google-maps6.jpg]()
Con este último ejemplo damos por finalizado este tutorial, como pudimos apreciar la utilización de vectores en nuestros mapas nos permiten aumentar su funcionalidad y utilidad, dándonos la posibilidad de implementar puntos de interés hasta rutas alternativas a los puntos que coloquemos en el mismo.
Esta información adicional que necesitamos incluir lo logramos con los vectores que no son más que formas que consisten en puntos, donde todos los tipos de vectores utilizados por el API son llamados overlays o de superposición.
Recomendación
En tutoriales pasados vimos la introducción al API, revisamos las opciones más importantes, aprendimos como obtener las credenciales para desarrolladores de Google y realizamos unos ejemplos sencillos de la utilización del mismo, por ello antes de leer el contenido de este tutorial o realizar los ejemplos aquí mencionados, recomendamos darle un vistazo a este tutorial.
Habiendo pasado por el tutorial recomendado y ya estando en contexto pasemos a la realización de los ejemplos prácticos, esto para el mejor entendimiento de la utilización de los vectores en nuestros mapas generados con el API.
Agregar marcadores a nuestro mapa
El uso de los mapas generados con el API se concentra la mayoría de las veces en sitios web donde su función principal es mostrar la localización de una compañía o negocio. A esto le podemos llamar un punto de interés que lo podemos representar sin ningún problema con un tipo de vector, el cuál para efectos del API de Javascript de Google Maps es conocido como marcador.
Sin más, veamos los pasos que debemos seguir para implementar un marcador estándar y adicionalmente uno personalizado en nuestro mapa.
1- Lo primero que debemos hacer es incluir el API y los estilos para la visualización de nuestro mapa, es importante destacar que debemos utilizar nuestra credencial de desarrollador de Google para el correcto funcionamiento de este ejemplo:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWLcB8DZXZy4orffB8EBESY9fhoVEvyxw&sensor=false">
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 5; }
#mapaDiv { width: 800px; height: 500px; }
</style>
2- Definimos nuestras variables globales, una llamada mapa y una serie de variables que utilizaremos para generar marcadores aleatorios de acuerdo a coordenadas que rodean la zona de Madrid.:
var mapa; var minLat = 38, maxLat = 41, minLng =-3, maxLng =-9, markerId = 1;
3- Luego definimos la función de inicialización de nuestro mapa, la cual contendrá las opciones más importantes para el mismo como zoom, tipo de base para el mapa y las coordenadas centrales que en este caso serán las de Madrid, obtenemos el ID del div por el DOM, inicializamos el mapa y definimos una función para manejar los eventos cuando posicionemos los marcadores en el mapa, veamos el segmento de código que acabamos de describir:
function inicializarMapa() {
google.maps.visualRefresh = true;
var mapOptions = {
center: new google.maps.LatLng(40.41678, -3.70379),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapElement = document.getElementById('mapaDiv');
mapa = new google.maps.Map(mapElement, mapOptions);
eventosMarcador();
}
4- Ahora debemos construir nuestra función eventosMarcador() el cual tendrá en su definición dos eventos atados por click de acuerdo al ID que se pulse de dos enlaces diferentes y que llamarán a dos funciones más que serán las encargadas de fijar los marcadores:
function eventosMarcador() {
document.getElementById('agregar_marcador').addEventListener('click', function(){
agregarMarcador();
});
document.getElementById('agregar_marcador_person').addEventListener('click', function(){
agregarMarcadorPerson();
});
}
5- Antes de construir las dos funciones que fijaran los marcadores es importante realizar algo de trabajo sobre las coordenadas para que nos proporcionen valores aleatorios en ese rango y las mismas puedan ser interpretadas por el API de Javascript de Google Maps, esto lo realizaremos con algunas operaciones aritméticas sobre las variables globales de las coordenadas, veamos la función correspondiente:
function crearLaLgRandom() {
var deltaLat = maxLat - minLat;
var deltaLng = maxLng - minLng;
var rndNumLat = Math.random();
var newLat = minLat + rndNumLat * deltaLat;
var rndNumLng = Math.random();
var newLng = minLng + rndNumLng * deltaLng;
return new google.maps.LatLng(newLat, newLng);
}
6- Hecho esto, podemos construir nuestras funciones para fijar los marcadores a nuestro mapa, para ello lo hacemos con el método Marker para generar un marcador estándar y con la función anterior generamos la coordenada aleatoria donde será desplegado el mismo:
function agregarMarcador() {
var coordinate = crearLaLgRandom();
var marker = new google.maps.Marker({
position: coordinate,
map: mapa,
title: 'Marcador Aleatorio - ' + markerId
});
markerId++;
}
Antes de pasar a nuestro marcador personalizado es importante mencionar que el mismo es basado en iconos y estos deben estar disponible en el directorio de nuestro proyecto, para este ejercicio se utilizaron algunos de los iconos gratuitos disponibles en la página de mapicons bajo la categoría markers, por lo que nos funcionarán sin ningún problema, para ello nos descargamos algunos y los colocamos en una carpeta llamada img ubicada en la raíz de nuestro proyecto como podemos ver en la siguiente imagen:
7- Luego de tener nuestros iconos solo debemos construir nuestra función, para ello creamos un array con los nombres de nuestros iconos y los vamos a recorrer de manera aleatoria, dándole un parámetro adicional a nuestro método Marker llamado icon el cual utilizara la imagen descargada para fijar el marcador:
function agregarMarcadorPerson() {
var markerIcons = ['comics', 'videogames', 'computers', 'hotfood','bike_rising'];
var rndMarkerId = Math.floor(Math.random() * markerIcons.length);
var coordinate = crearLaLgRandom();
var marker = new google.maps.Marker({
position: coordinate,
map: mapa,
icon: 'img/' + markerIcons[rndMarkerId] + '.png',
title: 'Marcador Aleatorio - ' + markerId
});
markerId++;
}
8- Por último agregamos el evento para inicializar nuestro mapa y creamos dos enlaces antes de nuestro div con los ID que definimos para nuestros eventos que llamarán a las funciones correspondientes:
google.maps.event.addDomListener(window, 'load', inicializarMapa); </script> </head> <body> <b>Agregar marcadores</b><br/> <br/> <a id="agregar_marcador" href="#">Agregar Marcador</a> | <a id="agregar_marcador_person" href="#">Agregar Marcador Personalizado</a> <div id="mapaDiv"></div> </body> </html>
Con esto ya tenemos nuestro mapa con la funcionalidad de poder agregar marcadores estándar y personalizados de acuerdo a lo que seleccionamos, es importante mencionar que podemos agregar tantos marcadores como deseemos esto nos permitirá ver el funcionamiento del API, para finalizar veamos como luce cuando lo ejecutamos en nuestro navegador:
Agregar popups a nuestro mapa
En todas las aplicaciones que nos encontramos en la web que despliegan un mapa, no descartan la posibilidad de mostrar información relacionada al punto que están señalando, es por ello que tenemos la posibilidad de agregar un popup o ventana desplegable para mostrar información de acuerdo a una cierta posición en nuestro mapa o incluso un marcador, veamos cómo podemos hacer esto:
1- Vamos a crear un nuevo archivo agregar_popup.html y utilizaremos como base el ejemplo anterior para insertar las nuevas funcionalidades, para ello copiamos y pegamos el código de nuestro mapa y vamos a localizar la función inicializarMapa() donde luego de obtener el ID vamos a definir con el método InfoWindow el popup para el centro de nuestro mapa, veamos el código para la funcionalidad mencionada:
var infowindow = new google.maps.InfoWindow({
content: '<div style="width:200px; height:100px;"><b>Contenido popup :</b><br><br>Este popup muestra el centro del mapa que es Madrid</div>',
position: new google.maps.LatLng(40.41678, -3.70379)
});
infowindow.open(map);
2- Ahora vamos a modificar nuestra función agregarMarcador() para agregarle un popup a cada marcador que aparezca en nuestro mapa, para ello utilizaremos de nuevo la función InfoWindow() y agregaremos un evento para la variable que definimos con la instancia del método, veamos:
function agregarMarcador() {
var coordinate = crearLaLgRandom();
var marker = new google.maps.Marker({
position: coordinate,
map: map,
title: 'Marcador Aleatorio - ' + markerId
});
var infowindow = new google.maps.InfoWindow({
content: 'Ventana de Info del Marcador - ID : ' + markerId
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
markerId++;
}
3- Hecho esto veamos como luce nuestro mapa con la funcionalidad del popup que acabamos de incluir:
4- Por últimos veamos la funcionalidad similar que le aplicamos a nuestros marcadores, esto lo hacemos presionando el enlace de Agregar Marcador:
Como pudimos ver extender la funcionalidad de nuestros mapas y los marcadores es bastante sencillo solo debemos usar los métodos adecuados para lograrlo.
Agregando línea a nuestro mapa
Ya hemos comprobado el poder de los vectores mostrando los puntos de interés en un mapa con los marcadores, sin embargo podemos usar los vectores para dibujar líneas y mostrar la ruta entre dos puntos de nuestro mapa, veamos como lo logramos:
1- Vamos a crear un archivo llamado agregar_linea.html y vamos incluir nuestro API así como los estilos del primer ejemplo, ahora vamos a definir las coordinadas que van desde Madrid a Barcelona, veamos:
var coordenadasLinea= [ [40.41678,-3.70379],[41.4080,2.2293], [40.42697,-3.71379],[41.3974,2.2033], [40.40700,-3.71340],[41.3980,2.2133], [40.42772,-3.71379],[41.3833,2.1833] ];
2- Antes de pasar a la función de inicialización de nuestro mapa vamos a crear primero la función agregarLinea() donde lo primero que vamos a hacer es iterar sobre el array de las coordenadas y crear un nuevo array que contendrá un objeto de tipo LatLng, veamos:
function agregarLinea() {
var pointCount = coordenadasLinea.length;
var linePath = [];
for (var i=0; i < pointCount; i++) {
var tempLatLng = new google.maps.LatLng(coordenadasLinea[i][0], coordenadasLinea[i][1]);
linePath.push(tempLatLng);
}
3- Luego seteamos las propiedades para nuestra línea, como color, opacidad y grosor. Después de hacer esto solo necesitamos enviar al método Polyline las opciones como parámetro y setear la variable polyline al mapa actual:
var lineOptions = {
path: linePath,
strokeWeight: 7,
strokeColor: '#313cac',
strokeOpacity: 0.8
}
var polyline = new google.maps.Polyline(lineOptions);
polyline.setMap(map);
}
4- Por último creamos nuestra conocida función inicializarMapa() y en vez de tener una función llamada eventosMarcador al final de la misma vamos a sustituir esta línea por el nombre de nuestra función agregarLinea(), creamos nuestro HTML y ejecutamos en nuestro navegador, debe verse de la siguiente forma:
Agregando línea animada a nuestro mapa
En el ejemplo anterior agregamos una línea a nuestro mapa y así demostramos la unión de dos puntos para demostrar la ruta entre estos, sin embargo este ejemplo a pesar de ser ilustrativo le falta algo todavía y es el hecho de mostrar movilidad entre estos dos puntos, como por ejemplo un automóvil desplazándose.
Esto puede sonar bastante complicado pero no lo es, con la ayuda de las clases y métodos del API podemos resolverlo con unas cuantas líneas de código, veamos como lo hacemos:
1- Lo primero es incluir nuestro API, nuestros estilos y definimos nuestras variables globales, usamos las mismas coordenadas del ejemplo anterior para usar la misma ruta, adicionalmente definimos la variable polyline como global para poderla usar en todo el alcance de nuestro Javascript:
var map; var polyline; var coordenadasLinea = [ [40.41678,-3.70379],[41.4080,2.2293], [40.42697,-3.71379],[41.3974,2.2033], [40.40700,-3.71340],[41.3980,2.2133], [40.42772,-3.71379],[41.3833,2.1833] ];
2- Ahora creamos nuestra función agregarLineaAnimada() que tendrá una estructura similar a la función agregarLinea() del ejemplo anterior, sin embargo esta función tendrá la definición del símbolo que usaremos para mostrar el objeto en movimiento entre estos dos puntos, para este caso utilizaremos una flecha:
var simboloFlecha = {
strokeColor: '#000',
scale: 3,
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
3- Por último solo debemos fijar esta variable a la opción icons de la definición de la línea:
var lineOptions = {
path: linePath,
icons: [{
icon: simboloFlecha
}],
strokeWeight: 3,
strokeColor: '#313cac',
strokeOpacity: 0.8
}
4- Hecho esto, solo nos falta animar nuestro ícono y esto lo hacemos en la función llamada animarFlecha() la cual debemos incluir al finalizar la definición de la función agregarLineaAnimada() veamos que contiene la función:
function animarFlecha() {
var counter = 0;
var accessVar = window.setInterval(function() {
counter = (counter + 1) % 100;
var arrows = polyline.get('icons');
arrows[0].offset = (counter / 2) + '%';
polyline.set('icons', arrows);
}, 50);
}
5- Para finalizar inicializamos nuestro mapa como ya sabemos y llamamos a nuestra función agregarLineaAnimada(), veamos al ejecutar como luce en nuestro navegador, es importante mencionar que la flecha posee un efecto de moverse de punto a punto:
Con este último ejemplo damos por finalizado este tutorial, como pudimos apreciar la utilización de vectores en nuestros mapas nos permiten aumentar su funcionalidad y utilidad, dándonos la posibilidad de implementar puntos de interés hasta rutas alternativas a los puntos que coloquemos en el mismo.
