Cómo dibujar una ruta sobre un mapa mediante la API de Google Maps Direction

En este tutorial veremos cómo dibujar una ruta entre dos localizaciones sobre un mapa utilizando la API de Google Maps Direction. Esta API te proporciona el servicio Direction el cual es ideal para dibujar rutas entre ubicaciones. Este servicio requiere que se dibuje tanto el inicio como el punto final de ruta.

En este ejemplo, tendremos un grupo de checkboxes que muestran distintas localizaciones. Al hacer submit de los diferentes checkboxes de las localizaciones, formaremos un array de puntos que trazarán nuestra ruta. Enviaremos el array de puntos al servicio Direction de Google Maps con el inicio y final de nuestra ruta. Una vez enviado, el sistema nos enviará una respuesta y en base al estado de dicha respuesta, mostraremos el dibujo de nuestra ruta.

Código HTML para mostrar los puntos de la ruta

El siguiente código HTML contiene varias localzaciones en checkboxes que después podremos mostrar en el mapa. Para ello pondremos a disposición del usuario un botón con el texto Draw Path que ejecutará el servicio Direction con los puntos marcados.

<div class="lbl-way-points">Way Points</div>
    
<div>
<?php
foreach ($countryResult as $k => $v) {
    ?>
  <div class="way-points-option"><input type="checkbox" name="way_points[]" class="way_points" value="<?php echo $countryResult[$k]["country"]; ?>"> <?php echo $countryResult[$k]["country"]; ?></div>
<?php
}
    ?>
<input type="button" id="go" value="Draw Path" class="btn-submit" />
</div>

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

Código para iniciar el mapa y solicitud al servicio Direction

El código para inicializar el mapa es el mismo que hemos visto en tutoriales anteriores, como cuando pusimos marcas en un mapa o como el de obtener la ubicación actual. En este código, formo el array de puntos utilizando los valores de los checkboxes marcados. Después, defino las opciones requeridas para la solicitud de servicio de Direction, como la ubicación de inicio y final y los puntos de ruta. El servicio Direction responderá a la solicitud con el recurso de dirección y el estado.

Esta respuesta se chequea utilizando una función de devolución de llamada. El recurso de dirección se representa en la capa del mapa en función del estado de la respuesta. Si el estado no es correcto, entonces mostraremos un cuadro de alerta de Javascript para indicar al usuario sobre el problema ocurrido al solicitar la dirección.

<script>
  	var map;
	var waypoints
  	function initMap() {
    	  	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);

        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        directionsDisplay.setMap(map);

        $("#go").on("click",function() {
        	    waypoints = Array();
            	$('.way_points:checked').each(function() {
                waypoints.push({
                    location: $(this).val(),
                    stopover: true
                });
            	});
            var locationCount = waypoints.length;
            if(locationCount > 0) {
                var start = waypoints[0].location;
                var end = waypoints[locationCount-1].location;
                drawPath(directionsService, directionsDisplay,start,end);
            }
        });
        
  	}
    	function drawPath(directionsService, directionsDisplay,start,end) {
        directionsService.route({
          origin: start,
          destination: end,
          waypoints: waypoints,
          optimizeWaypoints: true,
          travelMode: 'DRIVING'
        }, function(response, status) {
            if (status === 'OK') {
            directionsDisplay.setDirections(response);
            } else {
            window.alert('Problem in showing direction due to ' + status);
            }
        });
  }
</script>

 

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP