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>