hola tengo un problema con mi codigo no puedo solo me deja marcar rutas al azar pero no me deja meter direcciones por medio de cajas de texto
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Optimized Directions</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var origin = null;
var destination = null;
var waypoints = [];
var markers = [];
var directionsVisible = false;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var durango = new google.maps.LatLng(24.022789, -104.672184);
var myOptions = {
zoom:13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: durango
}
map = new google.maps.Map(document.getElementById("map_canva s"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById ("directionsPanel"));
google.maps.event.addListener(map, 'click', function(event) {
if (origin == null) {
origin = event.latLng;
addMarker(origin);
} else if (destination == null) {
destination = event.latLng;
addMarker(destination);
} else {
if (waypoints.length < 9) {
waypoints.push({ location: destination, stopover: true });
destination = event.latLng;
addMarker(destination);
} else {
alert("Maximum number of waypoints reached");
}
}
});
}
function addMarker(latlng) {
markers.push(new google.maps.Marker({
position: latlng,
map: map,
icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
}));
}
function calcRoute() {
if (origin == null) {
alert("Click on the map to add a start point");
return;
}
if (destination == null) {
alert("Click on the map to add an end point");
return;
}
var mode;
switch (document.getElementById("mode").value) {
case "driving":
mode = google.maps.DirectionsTravelMode.DRIVING;
break;
case "walking":
mode = google.maps.DirectionsTravelMode.WALKING;
break;
}
var request = {
origin: origin,
destination: destination,
waypoints: waypoints,
travelMode: mode,
optimizeWaypoints: document.getElementById('optimize').checked,
avoidHighways: document.getElementById('highways').checked,
avoidTolls: document.getElementById('tolls').checked
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
clearMarkers();
directionsVisible = true;
}
function updateMode() {
if (directionsVisible) {
calcRoute();
}
}
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
}
function clearWaypoints() {
markers = [];
origin = null;
destination = null;
waypoints = [];
directionsVisible = false;
}
function reset() {
clearMarkers();
clearWaypoints();
directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById ("directionsPanel"));
}
</script>
</head>
<body onload="initialize()" style="font-family: sans-serif;">
<table style="width: 400px;">
<tr>
<td><input type="checkbox" id="optimize" checked />Optimizar</td>
<td>
<select id="mode" onchange="updateMode()">
<option value="driving">Motocicleta</option>
<option value="walking">Caminando</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="highways" checked />Avoid highways</td>
<td><input type="button" value="Reset" onclick="reset()" /></td>
</tr>
<tr>
<td><input type="checkbox" id="tolls" checked />Avoid tolls</td>
<td><input type="button" value="Get Directions!" onclick="calcRoute()" /></td>
<td></td>
</tr>
</table>
<div style="position:relative; border: 1px; width: 610px; height: 400px; left:460px;">
<div id="map_canvas" style="border: 1px solid black; position:absolute; top:-30px; left:-50px; width:800px; height:520px"></div>
<div id="directionsPanel" style="position:absolute; left: -46px; top:500px; width:800px; height:400px; overflow: auto"></div>
</div>
</body>
</html>
