Created
March 8, 2014 07:07
-
-
Save poguez/9426599 to your computer and use it in GitHub Desktop.
Ejemplo Javascript de Rutas y direcciones dragabble Google Maps V3 caminando de Puebla-Veracruz, pasando por Tlaxcala y Córdoba.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | |
<meta charset="utf-8"> | |
<title>Ejemplo de rutas Draggable</title> | |
<style> | |
html, body, #map-canvas { | |
height: 100%; | |
margin: 0px; | |
padding: 0px | |
} | |
</style> | |
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> | |
<script> | |
var rendererOptions = { | |
draggable: true | |
}; | |
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);; | |
var directionsService = new google.maps.DirectionsService(); | |
var map; | |
var puebla = new google.maps.LatLng(19.039757,-98.206435); | |
function initialize() { | |
var mapOptions = { | |
zoom: 7, | |
center: puebla | |
}; | |
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); | |
directionsDisplay.setMap(map); | |
directionsDisplay.setPanel(document.getElementById('directionsPanel')); | |
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { | |
computeTotalDistance(directionsDisplay.getDirections()); | |
}); | |
calcRoute(); | |
} | |
function calcRoute() { | |
var request = { | |
origin: 'Puebla,PUE', | |
destination: 'Veracruz, VER', | |
waypoints:[{location: 'Tlaxcala, tlax'}, {location: 'Cordoba,VER'}], | |
travelMode: google.maps.TravelMode.WALKING | |
}; | |
directionsService.route(request, function(response, status) { | |
if (status == google.maps.DirectionsStatus.OK) { | |
directionsDisplay.setDirections(response); | |
} | |
}); | |
} | |
function computeTotalDistance(result) { | |
var total = 0; | |
var myroute = result.routes[0]; | |
for (var i = 0; i < myroute.legs.length; i++) { | |
total += myroute.legs[i].distance.value; | |
} | |
total = total / 1000.0; | |
document.getElementById('total').innerHTML = total + ' km'; | |
} | |
google.maps.event.addDomListener(window, 'load', initialize); | |
</script> | |
</head> | |
<body> | |
<div id="map-canvas" style="float:left;width:70%; height:100%"></div> | |
<div id="directionsPanel" style="float:right;width:30%;height 100%"> | |
<p>Total Distance: <span id="total"></span></p> | |
</div> | |
</body> | |
</html>>)} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Bro te amo, era exactamente lo que buscaba