Foros del Web » Creando para Internet » HTML »

html google maps

Estas en el tema de html google maps en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/10/2015, 10:28
 
Fecha de Ingreso: septiembre-2015
Mensajes: 1
Antigüedad: 6 años, 10 meses
Puntos: 0
html google maps

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>

Etiquetas: google, maps
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:52.