Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/05/2015, 14:45
cmelgarejo
 
Fecha de Ingreso: mayo-2015
Mensajes: 2
Antigüedad: 9 años, 7 meses
Puntos: 0
geolocalizacion de una ruta con waypoint api de google maps

hola bueno estoy haciendo mi proyecto de titulo y necesito hacer rutas dependiendo de mi origen (geolocalizacion) he hitos sacados de una base de datos.
Aqui esta mi codigo le falta geolocalizar .

<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> Waypoints </title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
</style>
<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;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var local = new google.maps.LatLng(-36.920193, -73.026995);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: local
}
map = new google.maps.Map(document.getElementById("map_canva s"), myOptions);
directionsDisplay.setMap(map);
calcRoute();


function calcRoute() {
function informacion (coordenadas) {
$("#latitude").html(coordenadas.Lat);
$("#longitude").html(coordenadas.Lng);
}
var coordenadas = {
Lat: 0,
Lng: 0
};

function localizacion (posicion) {
coordenadas = {
Lat: posicion.coords.latitude,
Lng: posicion.coords.longitude
}

informacion(coordenadas);
var local = new google.maps.LatLng(coordenadas.Lat, coordenadas.Lng);
var request = {
origin: local,

waypoints:[{location:' (-36.925579, -73.025150) '},
{location:' (-36.925957, -73.028669) '},{location:' (-36.916899, -73.025707) '}],

optimizeWaypoints: true,
destination: "(-33.47985788103725, -70.64004394531253)",

travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
summaryPanel.innerHTML += route.legs[i].start_address + " to ";
summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
summaryPanel.innerHTML += route.legs[i].duration.text + "<br />";
}

computeTotalDistance(response);
} else {
alert("directions response "+status);
}
});//fin directionServise
}//fin localizacion
}//fin cal ruta
}// fin inicialiti
function computeTotalDistance(result) {
var totalDist = 0;
var totalTime = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
totalDist = totalDist / 1000.
document.getElementById("total").innerHTML = "total distance is: "+ totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(2) + " minutes";
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
<div id="total"></div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">

</script>
</body>
</html>