Cómo dibujar rutas mediante la API de Google Maps

En este tutorial vamos a ver cómo dibujar una ruta entre múltiples localizaciones en un mapa utilizando la API de Javascript de Google Maps. En otro tutorial ya vimos cómo añadir marcadores sobre un mapa. En este ejemplo, lo que haremos es añadir marcadores para definir ubicaciones y conectar los puntos trazando una ruta entre dichas localizaciones. En esta mapa mostraremos un plan de vuelo, es decir, trazaremos una línea entre los distintos puntos que recorrerá el avión.

Para ello utilizaremos la clase Polyline de la API de Google Maps. Utilizaremos esta clase para trazar la ruta sobre un mapa sobre unas coordenadas dadas. Obtendré la lista de paises de la base de datos y calcularemos la coordenadas de la ubicación de cada país mediante el servicio Google Map GeoCoding. Insertaremos estas localizaciones enb un array, y luego se lo pasaremos como parámetro a la clase Polyline para trazar la ruta.

Utilizar la API de Google Maps para dibujar rutas

Utilizaremos el siguiente Javascript para obtener la latitud y la longitud de los países que hemos extraído de la base de datos. Este código es muy similar al que hemos visto en el tutorial de añadir marcadores en un mapa. Pondremos dichas coordenadas en un array que después recorreremos en un bucle.

Definiremos una función que llame a la clase Google Polyline para trazar la ruta entre las coordenadas de los países. Llamaremos a esta función, una vez hemos obtenido todos los países de la base de datos, los hemos recorrido y los hemos almacenado en un array. Cuando lo tengas, pasaremos el array de coordenadas a la función para trazar la ruta.

<script>
	var map;
	var pathCoordinates = Array();
	function initMap() {
		var countryLength
		var mapLayer = document.getElementById("map-layer");
		var centerCoordinates = new google.maps.LatLng(37.6, -95.665);
		var defaultOptions = {
			center : centerCoordinates,
			zoom : 4
		}
		map = new google.maps.Map(mapLayer, defaultOptions);
		geocoder = new google.maps.Geocoder();
		<?php
            if (! empty($countryResult)) {
            ?>
		countryLength = <?php echo count($countryResult); ?>
		<?php
                foreach ($countryResult as $k => $v) 
                {
            ?>
		geocoder.geocode({
			'address' : '<?php echo $countryResult[$k]["country"]; ?>'
		}, function(LocationResult, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				var latitude = LocationResult[0].geometry.location.lat();
				var longitude = LocationResult[0].geometry.location.lng();
				pathCoordinates.push({
					lat : latitude,
					lng : longitude
				});

				new google.maps.Marker({
					position : new google.maps.LatLng(latitude, longitude),
					map : map,
					title : '<?php echo $countryResult[$k]["country"]; ?>'
				});

				if (countryLength == pathCoordinates.length) {
					drawPath();
				}

			}
		});
		<?php
                }
            }
            ?>
	}
	function drawPath() {
		new google.maps.Polyline({
			path : pathCoordinates,
			geodesic : true,
			strokeColor : '#FF0000',
			strokeOpacity : 1,
			strokeWeight : 4,
			map : map
		});
	}
</script>
<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=<?php echo API_KEY; ?>&callback=initMap">
	
</script>