Problema con googlemaps calculo de ruta

gonzalotola · #1 (**permalink**) 12/11/2013, 07:44

Hola amigos, estoy programando una plataforma de itinerarios turísticos y tengo un problema, cuando cargo otra pestaña que me lleva a otro html, lo que pasa es que tengo programado un calculador de ruta con google maps y cuando clikeo en la pestaña me lleva al otro html y se pierde la ruta trazada en la pagina anterior, quería saber como puedo hacer que cargue el mismo mapa con la ruta trazada cuando se redireccionar a otro html y que aparesca en este html. aquí dejo el código que estoy usando.

de antemano muchas gracias.

<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function calculateRoute(from, to) {
// Center initialized to villarica
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-39.397, -70.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(
directionsRequest,
function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
new google.maps.DirectionsRenderer({
map: mapObject,
directions: response
});
}
else
$("#error").append("Unable to retrieve your route<br />");
}
);
}

$(document).ready(function() {
// If the browser supports the Geolocation API
if (typeof navigator.geolocation == "undefined") {
$("#error").text("Your browser doesn't support the Geolocation API");
return;
}

$("#from-link, #to-link").click(function(event) {
event.preventDefault();
var addressId = this.id.substring(0, this.id.indexOf("-"));

navigator.geolocation.getCurrentPosition(function( position) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
$("#" + addressId).val(results[0].formatted_address);
else
$("#error").append("Unable to retrieve your address<br />");
});
},
function(positionError){
$("#error").append("Error: " + positionError.message + "<br />");
},
{
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
});
});

$("#calculate-route").submit(function(event) {
event.preventDefault();
calculateRoute($("#from").val(), $("#to").val());
});
});
</script>

#2 (**permalink**) 12/11/2013, 10:33

Cita:

Iniciado por gonzalotola

Hola amigos, estoy programando una plataforma de itinerarios turísticos y tengo un problema, cuando cargo otra pestaña que me lleva a otro html, lo que pasa es que tengo programado un calculador de ruta con google maps y cuando clikeo en la pestaña me lleva al otro html y se pierde la ruta trazada en la pagina anterior, quería saber como puedo hacer que cargue el mismo mapa con la ruta trazada cuando se redireccionar a otro html y que aparesca en este html. aquí dejo el código que estoy usando.

Entiendo que los datos los recoges y envías mediante un <form method="get"> Según se puede ver en varias páginas con tu mismo código (con mínimas variaciones de centrado y la forma de que le llamas al mapa -map-canvas-) el body HTML sería:

Código HTML:

Ver original<body>
    <h1>Calculate your route</h1>
    <form id="calculate-route" name="calculate-route" action="#" method="get">
      <label for="from">From:</label>
      <input type="text" id="from" name="from" required="required" placeholder="An address" size="30" />
      <a id="from-link" href="#">Get my position</a>
      <br />
      <label for="to">To:</label>
      <input type="text" id="to" name="to" required="required" placeholder="Another address" size="30" />
      <a id="to-link" href="#">Get my position</a>
      <br />
      <input type="submit" />
      <input type="reset" />
    </form>
    <div id="map-canvas"></div>
    <p id="error"></p>
  </body>

Para poder enviar mediante get, en el javascxript tienes que hacer esta corrección:

Código Javascript:

Ver original$("#calculate-route").submit(function (event) {
    // event.preventDefault(); // Eliminar esta línea para poder ver dichos datos en la barra de direcciones
    calculateRoute($("#from").val(), $("#to").val());
  });

Y a partir de ahí recoger en "el otro HTML" (mejor PHP) los valores from y to de la ventana vía get.