Cargando



Servicios de Google Maps

En este tutorial veremos los servicios que ofrece el API de JavaScript de Google Maps para extender la funcionalidad de nuestros mapas.


ene 13 2015 05:08
Profesional
ene 13 2015 11:38
Los servicios que ofrece el API de Javascript de Google Maps son tan variados como funcionales, los mismos poseen una calidad que diferencia a Google Maps de sus competidores, estos servicios generalmente trabajan de manera asíncrona, lo cual permite realizar la petición a un servidor externo y un método de tipo callback es el encargado de procesar las respuestas.

Uno de los puntos fuertes de estos servicios es que son totalmente compatibles con las clases y objetos del API. Podemos desde consultar la dirección de un punto en específico de nuestro mapa hasta incluso implementar la vista de calle.

Servicios del API


Antes de pasar a los ejemplos veamos algunos de los servicios más importantes y que estaremos utilizando en este tutorial.

Codificación geográfica
Este servicio nos permite transformar direcciones comunes a coordenadas geográficas basadas en latitud y longitud de un punto, esto nos permite colocar marcadores o posicionar nuestro mapa, para realizar estas operaciones el API proporciona una clase llamada geocoder().


Matriz de distancia
Este servicio nos ayuda a calcular la distancia y duración del recorrido entre múltiples puntos, algo que se utiliza bastante hoy en día, para esto contamos con el objeto de google.maps.DistanceMatrixService y sus métodos asociados.


Street View
El servicio de Street View o vista de calle nos ofrece vistas panorámicas de 360 grados en las áreas donde el mismo tiene cobertura, algo que hará que nuestros mapas de destaquen sin lugar a dudas.


Recordar que aquí os detallé el funcionamiento de API y manejo de eventos en Google Maps y la Introducción para entender el API de Javascript en Google Maps.

Encontrar una dirección con un click


Para realizar este ejemplo estaremos utilizando el servicio de geocoder() pero como comentábamos este permite transformar una dirección en una coordenada, esto está bien, pero para el usuario convencional es algo que no le ve mucha utilidad es por ello que utilizaremos el geocoder en reversa para obtener la dirección que necesitamos con un click. Veamos los pasos que debemos seguir:

1- Primero como ya sabemos incluimos el API, sin olvidar utilizar nuestras credenciales, adicionalmente a esto vamos a incluir la librería de drawing que nos permitirá implementar la funcionalidad de dibujar marcadores, esta librería la concatenamos a nuestra credencial con el símbolo del & como veremos a continuación:

<script type="text/javascript"
	 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWLcB8DZXZy4orffB8EBESY9fhoVEvyxw&libraries=drawing&sensor=false">
</script>

2- No podemos olvidarnos de los estilos para el mapa, los cuales le darán el tipo de visualización en la página, así como definir las variables globales que tendrán un alcance global en todos los métodos de nuestro código:

<style type="text/css">
			 html { height: 100% }
			 body { height: 100%; margin: 5; }
			 #mapaDiv { width: 800px; height: 500px; }
</style>

var map;
var geocoder
var popup;

3- Luego de esto definimos nuestro método inicializarMapa() donde lo primero que realizaremos será declarar nuestro objeto de tipo geocoder ayudándonos de la clase Geocoder() y con InfoWindow el objeto para el popup que nos desplegará la dirección en pantalla:

function inicializarMapa() {
		 geocoder = new google.maps.Geocoder();
		 popup = new google.maps.InfoWindow();

4- Incluimos las opciones convencionales del mapa como el centro, el zoom y el tipo de base, obtenemos el elemento DOM e instanciamos el método Map:

google.maps.visualRefresh = true;

				 var mapOptions = {
						 center: new google.maps.LatLng(40.41678, -3.70379),
						 zoom: 10,
						 mapTypeId: google.maps.MapTypeId.ROADMAP
				 };

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

5- Ahora creamos el gestor de dibujo que nos permitirá dibujar marcadores, para ello haremos una instancia de DrawingManager, lo hacemos visible en la interfaz del usuario y seleccionamos que modos serán desplegados en el control y en qué posición estarán los mismos:

var drawingManager = new google.maps.drawing.DrawingManager({
		 drawingMode:null,
		 drawingControl:true,
		 drawingControlOptions: {
		 position: google.maps.ControlPosition.TOP_CENTER,
	 		 drawingModes: [
			 google.maps.drawing.OverlayType.MARKER
			 ]
		 }
		 });


6- Ahora habilitamos la funcionalidad recién creada, agregamos el listener para nuestro evento y para realizar geocoder en reversa obtenemos la posición en latitud y longitud de nuestro marcador con el método getPosition():

drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'markercomplete', function(marker) {
var markerPosition = marker.getPosition();

7- Para poder completar el geocoder en reversa utilizaremos el servicio de geocode() y realizaremos un condicional para verificar que el servicio retorna una respuesta válida sino lo manejamos de forma que el usuario sepa que fallo y si el resultado es correcto llamamos a nuestro método MostrarDireccion():

geocoder.geocode({'latLng': markerPosition}, function(results, status) {
				 if (status == google.maps.GeocoderStatus.OK) {
				 if (results) {
					 MostrarDireccion(results[0],marker);
				 }
				 }
				 else {
				 alert("Fallo el servicio: " + status);
				 }
			 });


8- Por último solo nos queda construir el método de MostrarDireccion() el cual recibirá el resultado de nuestro geocoder en reversa y la posición del marcador, con esto podemos establecer el centro y desplegar la información de la dirección formateada sin ningún problema:

function MostrarDireccion(result, marker) {
	 	map.setCenter(marker.getPosition());
		 map.setZoom(13);

		 var popupContent = '<b>Direccion: </b> ' + result.formatted_address;
		 popup.setContent(popupContent);
		 popup.open(map, marker);
		
		 }

9- Cerramos las etiquetas correspondientes y agregamos la porción del código HTML para completar nuestro ejemplo:

</script>
</head>
<body onload="inicializarMapa()">
	 <b>Encontrar direccion en el mapa con un click</b><br/><br/>
	 <div id="mapaDiv"/>
</body>
</html>


10- Ejecutamos en nuestro navegador y hacemos click en cualquier punto de nuestro mapa y obtendremos la dirección desplegada en el popup que declaramos, debe verse de la siguiente manera:


Esta funcionalidad puede ser aplicada a cualquier punto de nuestro mapa solo debemos movernos por el mismo y seleccionar otro punto.

Creando una matriz de distancia


El API de Javascript de Google Maps nos brinda unos servicios bastantes útiles, uno de ellos es la matriz de distancia la cual nos permite calcular la distancia y tiempo entre múltiples puntos, funcionalidad que podemos utilizar para implementar distintas soluciones en cualquier negocio, desde calcular tiempos de entregas o establecer cuál es la ruta más óptima entre varios puntos. Veamos los pasos que debemos seguir para implementar esta funcionalidad entre nuestros mapas.

1- Incluimos nuestro API junto con la librería drawing, así como los estilos para el despliegue de nuestro mapa y el contenedor de nuestra matriz:

<script type="text/javascript"
		 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWLcB8DZXZy4orffB8EBESY9fhoVEvyxw&libraries=drawing&sensor=false">
</script>

<style type="text/css">
			 html { height: 100% }
			 body { height: 100%; margin: 5px; }
			 #mapaDiv { width: 100%; height: 95%; }
								 #matrizDireccionDiv { padding:10px; width: 600px; height: 500px; }
								 #mapaContainerDiv { padding:10px; float:left; width: 800px; height: 500px}
		 					 #matrizResultado {overflow-y: auto;max-width:600px; max-height:600px;}
	 </style>


2- Definimos las variables globales para su uso en todo el alcance de nuestro código y en la función inicializarMapa() inicializamos los arrays para manejar la latitud y longitud tanto del origen como el destino:

var map;
var origenLatLon;				
var destinoLatLon;							
var distanceMatrixService;
var markerCount;
var matrizResultado;

function inicializarMapa() {
	 origenLatLon = [];
	 destinoLatLon = [];


3- Luego en la misma función obtenemos el botón y el manejador del evento para el mismo, adicionalmente inicializamos el objeto para el servicio de DistanceMatrixService así como el contador para los marcadores y asignamos el resultado de la matriz a un div contenedor:

var generarMatrizBtn = document.getElementById('generarMatriz');
generarMatrizBtn.addEventListener('click', function(){
PeticionMatriz();
});
																			
distanceMatrixService = new google.maps.DistanceMatrixService();
																			
							 markerCount = 0;
																			
							 matrizResultado = document.getElementById('matrizResultado');


4- Incluimos las opciones convencionales del mapa como el centro, el zoom y el tipo de base, obtenemos el elemento DOM e instanciamos el método Map:

google.maps.visualRefresh = true;

				 var mapOptions = {
						 center: new google.maps.LatLng(40.41678, -3.70379),
						 zoom: 10,
						 mapTypeId: google.maps.MapTypeId.ROADMAP
				 };

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


5- Así como el ejercicio anterior creamos el gestor de dibujo que nos permitirá dibujar marcadores, para ello haremos una instancia de DrawingManager y le proporcionamos las opciones necesarias, lo habilitamos y agregamos el listener para el evento:

var drawingManager = new google.maps.drawing.DrawingManager({
																							
drawingMode:null,
																							
drawingControl:true,
																							
drawingControlOptions: {
																											
position: google.maps.ControlPosition.TOP_CENTER,
																											
drawingModes: [
																															 google.maps.drawing.OverlayType.MARKER
																											
]
																							
}
																			 });
drawingManager.setMap(map);

google.maps.event.addListener(drawingManager, 'markercomplete', function(marker) {

6- Luego de esto realizamos las validaciones para limitar el número de destinos permitidos y fijamos los iconos que vamos a utilizar para nuestros marcadores:

markerCount++;
																							
if (markerCount > 10)
{
alert("No mas destinos permitidos");
drawingManager.setMap(null);
marker.setMap(null);
return;
}

if (markerCount % 2 === 0)
{
destinoLatLon.push(marker.getPosition());
marker.setIcon('img/comics.png');
}
else
{
origenLatLon.push(marker.getPosition());
marker.setIcon('img/videogames.png');
}
							 });


7- Ahora solo nos queda crear nuestras funciones para manejar las peticiones realizadas al servicio de distanceMatrixService, primero creamos la que preparará la propiedad del request:

function PeticionMatriz()
											 {
distanceMatrixService.getDistanceMatrix(
{
origins: origenLatLon,
destinations: destinoLatLon,
travelMode: google.maps.TravelMode.DRIVING,
																			 },
obtenerResultadoMatriz
															 );
											 }


8- Creamos la función para el callback y que nos permitirá obtener la respuesta del servicio y en la cual incluiremos las validaciones necesarias en caso que el servicio falle manejar el error de la mejor manera:

function obtenerResultadoMatriz(result, status) {
matrizResultado.innerHTML = '';
if (status == google.maps.DistanceMatrixStatus.OK) {
var originAddresses = result.originAddresses;
var destinationAddresses = result.destinationAddresses;
for (var i = 0, l=originAddresses.length; i < l; i++) {
var elements = result.rows[i].elements;
for (var j = 0, m=elements.length; j < m; j++) {
var originAddress = originAddresses[i];
var destinationAddress = destinationAddresses[j];
var element = elements[j];
var distance = element.distance.text;
var duration = element.duration.text;
resultadosMatrizDiv(originAddress, destinationAddress, distance, duration, i, j);
}
}
}
else
															 {
alert('No se pudo obtener la matriz: ' + status);
															 }


9- Adicionalmente creamos la función que escribirá los resultados obtenidos en el div correspondiente:

function resultadosMatrizDiv(originAddress, destinationAddress, distance, duration, originAddressCount, destinationAddressCount)
											 {

															
var existingContent = matrizResultado.innerHTML;
var newContent;
newContent = '<b>Origen ' + contarLetras(originAddressCount) + ' :</b><br />';
newContent += originAddress + '<br />';
newContent += '<b>Destino ' + contarLetras(destinationAddressCount) + ' :</b><br />';
newContent += destinationAddress + '<br />';
newContent += '<b>Destino: </b> ' + distance + '<br />';
newContent += '<b>Destino: </b> ' + duration + '<br />';
newContent += '<br />';
matrizResultado.innerHTML = existingContent + newContent;
											
}


9- Por último en nuestro Javascript manejamos los contadores en una función para retornar el nombre correspondiente al contador del marcador que estamos colocando:

function contarLetras(count)
											 {
															
switch (count)
															
{
																			
case 0:
return 'Tienda Comics';
case 1:
return 'Tienda Videojuegos';
case 2:
return 'Tienda Comics';
case 3:
return 'Tienda Comics';
case 4:
return 'Tienda Videojuegos';
default:
return null;
															 }
											 }

10- Cerramos las etiquetas correspondientes y agregamos la porción del código HTML para completar nuestro ejemplo:

</script>
</head>
<body onload="inicializarMapa()">
	 <span id="mapaContainerDiv">
											 <div id="mapaDiv" >
											 </div>
							 </span>
							 <span id="matrizDireccionDiv">
											 <b>Utilizar matriz de distancia</b></br>
											 <input type="button" id ="generarMatriz" value="Generar Matriz de Distancia" />
											 <div id="matrizResultado">
											 </div>
							 </span>
</body>
</html>


11- Ejecutamos nuestro ejemplo en el navegador y para visualizar el funcionamiento de nuestro mapa, colocaremos 4 puntos de interés y pulsaremos el botón de Generar Matriz de Distancia:


Como podemos observar en nuestra imagen tenemos cuatro puntos en nuestro mapa donde la matriz de distancia nos permite calcular la distancia y el tiempo entre cada uno de ellos.

Implementando Street View


Para finalizar este tutorial implementaremos el servicio de Street View, es un ejemplo bastante sencillo pero que sumado a los demás servicios disponibles, harán que nuestros mapas destaquen por sobre los demás, veamos qué debemos hacer para implementar este servicio:

1- Incluimos el API y definimos los estilos correspondientes, en este ejemplo no utilizaremos la librería de drawing por lo que no será incluida:

<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 globlales y creamos nuestra función inicializarMapa() con las opciones convencionales, centro de nuestro mapa, zoom y tipo de base, obtenemos el elemento DOM e instanciamos el método Map:

var map;
											
											 var geocoder;
											
											 var streetView;
											
			 function inicializarMapa() {
																			 popup = new google.maps.InfoWindow();

																			 geocoder = new google.maps.Geocoder();

				 google.maps.visualRefresh = true;

				 var mapOptions = {
						 center: new google.maps.LatLng(40.41678, -3.70379),
						 zoom: 10,
						 mapTypeId: google.maps.MapTypeId.ROADMAP
				 };

				 var mapElement = document.getElementById("mapaDiv");

				 map = new google.maps.Map(mapElement, mapOptions);


3- Dentro de nuestra función llamamos al servicio de Street View y luego de esto creamos una función para fijar las opciones del mismo como la locación y el punto de vista:

streetView = map.getStreetView();
																																							
															
}
															
function fijarOpcionesStreetView(location)
{
streetView.setPosition(location);
streetView.setPov({
heading: 0,
itch: 10
});
}


4- Por último creamos las funciones para poder cambiar entre la vista convencional del mapa y la Streer View, veamos como lucen estas:

function mostrarMapa()
															
{
																			
streetView.setVisible(false);
															
}

function mostrarStreetView()
{
fijarOpcionesStreetView(map.getCenter());
streetView.setVisible(true);
															 }


5- Cerramos las etiquetas correspondientes y agregamos la porción del código HTML para completar nuestro ejemplo:

</script>
</head>
<body onload="inicializarMapa()">
	 <div>
								 <b>Mapa con Street View</b>
								 <div id="mapaDiv"/>
					 </div>
								 <input type="button" value="Mostrar Mapa" onclick="mostrarMapa()">
								 <input type="button" value="Mostrar Street View" onclick="mostrarStreetView()">

</body>
</html>

6- Ejecutamos nuestro ejemplo en el navegador y pulsamos el botón de Mostrar Street View para visualizar la funcionalidad como podemos apreciar en la siguiente imagen:


Si deseamos volver a la vista por defecto de nuestro mapa solo debemos pulsar el botón de Mostrar Mapa.

Con esto damos por finalizado este tutorial, como pudimos apreciar los servicios presentes en el API de Javascript de Google Maps nos permiten extender mucho más las funcionalidades de nuestros mapas, posicionándolo como una opción a tomar en cuenta en los sistemas que implementemos que necesiten utilizar la localización y cálculos de tiempo y/o distancia.

Os recuerdo este tutorial, que también os vendrán bien: Aprender el uso de vectores en Google Maps

¿Te ayudó este Tutorial?


3 Comentarios


Vega Ortiz
ene 13 2015 19:53
Me ayudo mucho este tutorial. Muchas gracias!

David Sanz
ene 13 2015 19:54
A mi también me gusta mucho, he visto los otros que hiciste y ahora te sigo. Gracias Jacosta!

Miguel Guerrero
ene 16 2015 12:08
Genial Tutorial Jon
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X