Cómo añadir una ruta en la API de JavaScript de Google Maps


En este tutorial veremos cómo crear un mapa básico con la API de JavaScript de Google Maps y añadir una ruta de un punto a otro.


El código completo es el siguiente:

						
<html>
   <head>
      <style>
         html, body { border: 0; margin: 0; padding: 0; }
         #map { height: 100vh; width: 100vw; }
      </style>
   </head>
   <body>
      <div id="map"></div>
      <script>
         var map;
         function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
               center: { lat: 40.349650, lng: -3.695202 },
               zoom: 13
            });

            //Begin Routing
            const directionsService = new google.maps.DirectionsService();
            const directionsRenderer = new google.maps.DirectionsRenderer();
            directionsRenderer.setMap(map);
            const request = {
               origin: new google.maps.LatLng(40.350637, -3.693359),
               destination: new google.maps.LatLng(40.348336, -3.696776),
               travelMode: 'WALKING'
            };
            directionsService.route(request, response => {
               directionsRenderer.setDirections(response);
            });
         }
      </script>
      <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
   </body>
</html>
						
					

Ahora vamos a entender un poco mejor este código y cómo trabaja la API de JavaScript de Google Maps.

Lo primero y más importante, para visualizar el mapa necesitamos tener un TOKEN o Clave API, y para ello necesitamos un proyecto de Google Cloud Plataform (GCP) asociado a una cuenta de facturación, os dejo la información de Google mucho más detallada.

Una vez tenemos el script de inserción con la clave asociada, tendrá la siguiente pinta:

						
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
						
					

Ahora vamos a desgranar el código.

Lo primero va a ser definir los estilos del mapa, en la cabecera o head, en este caso para definido y visualizarlo a pantalla completa, lo haremos de la siguiente manera:

						
<style>
 html, body { border: 0; margin: 0; padding: 0; }
 #map { height: 100vh; width: 100vw; }
</style>
						
					

A continuación, vamos a añadir el contenedor del mapa:

						
      <div id="map"></div>
						
					

Finalmente, la parte más compleja y que va a definir la funcionalidad del mapa, el script:

						
var map;
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
	   center: { lat: 40.349650, lng: -3.695202 },
	   zoom: 13
	});
}
						
					

En esta parte vamos a centrar el mapa en unas coordenadas especificas y darle un nivel de zoom, en nuestro caso 13.

Ahora vamos a añadir la funcionalidad del Routing, para definir la ruta a seguir desde un punto de origen a un punto de destino.

						
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
const request = {
   origin: new google.maps.LatLng(40.350637, -3.693359),
   destination: new google.maps.LatLng(40.348336, -3.696776),
   travelMode: 'WALKING'
};
directionsService.route(request, response => {
   directionsRenderer.setDirections(response);
});
						
					

Las coordenadas empleadas se encuentran en el sistema de referencia de Google, es decir Google Web Mercator o WGS84/Pseudo-Mercator, las podéis extraer de Google Maps, de la siguiente manera:

En la plataforma de Google Maps, hacemos clic con el botón derecho, y en el menú que se abrirá, hacemos clic sobre el tercer elemento ¿Qué hay aquí?, en la parte inferior os aparecerán las coordenadas del punto elegido.

Lo único que debemos hacer en esta parte del código es remplazar las coordenadas de origen y destino, y especificar el medio de transporte, que pueden ser:

  • DRIVING (por defecto) indica una ruta de conducción estándar utilizando la red de carreteras.
  • BICYCLING solicita indicaciones para ir en bicicleta a través de carriles bici y calles preferidas.
  • TRANSIT solicita direcciones a través de rutas de transporte público.
  • WALKING solicita indicaciones para caminar a través de senderos peatonales y aceras.

Finalmente vamos a añadir el script con la clave de la API que hemos obtenido con anterioridad:

						
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
						
					

Si queréis saber un poco más sobre la API de rutas de Google.

Y hasta aquí este recorrido entre dos puntos a través de la API de JavaScript de Google Maps que puede ser estupendo para la pagina de contacto de una empresa y dar sencillas indicaciones de cómo llegar, en este caso os guiamos desde la parada del metro más cercano hasta nuestras oficinas ;).


¿Alguna pregunta? ¿Quieres realizar sinergias o colaboraciones? ¿Te gustaría enviarnos feedback sobre el tutorial? No dudes en contactar a jgabas@geopois.com.



Sobre el Autor


Javier Gabás Jiménez

Soy un apasionado de los mapas y la infraestructura de datos espaciales, me divierto mucho buscando formas de comprender y presentar datos visualmente, así como entender la programación que hay debajo. Ingeniero en geomática y topografía por la Universidad Politécnica de Madrid, cuando no estoy trabajando o estudiando, estaré viajando y disfrutando de la vida junto a mi pareja.


¿Eres desarrollador? Únete a la red