Tema: como mantener una ruta en google maps aunque actualice el navegador
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 19/11/2012, 14:51
Avatar de maximendez88
maximendez88
 
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 12 años, 2 meses
Puntos: 3
Respuesta: como mantener una ruta en google maps aunque actualice el navegador
Estuve intentando hacer algo asi con cookies, pero aun no logro que mantenga la ruta.... quizas me estoy equivocando en algo...




Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.     <meta charset="utf-8" />
  4.      <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  5.     <title>Test Google Maps</title>
  6.  
  7.  
  8. <script type="text/javascript">
  9.     function mantenermapa() 
  10.     {
  11.         if(document.cookie!="")
  12.         {
  13.              initialize();
  14.         }
  15.     }
  16.  
  17. </script>
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24.     </head>
  25. <body onload="mantenermapa()">
  26.         <!-- MAPA -->
  27.         <div id="map_canvas" style="width: 600px; height: 600px;"></div>
  28.         <input type="text" name="ciudad" id="ciudad" /> <button onclick="agregarCiudad();">Agregar</button>
  29.        
  30.         <!-- funcion para agregar ciudad. La separo porque es sólo ejemplo -->
  31.         <script type="text/javascript">
  32.             function agregarCiudad(){
  33.                 showAddress(document.getElementById('ciudad').value);
  34.                 document.cookie="ciudad = document.getElementById('ciudad'); expires = 2 Dec 2015 23:59:59 GMT"
  35.  
  36.  
  37.                 document.getElementById('ciudad').value = '';
  38.             }
  39.         </script>
  40.        
  41.         <script type="text/javascript">
  42.         //variables y objetos globales
  43.         var map             //mapa
  44.         var geocoder;       //geocoder
  45.         var _path = [];     // ruta
  46.         var _poliLinea = new google.maps.Polyline({ //polilinea
  47.             path: _path,
  48.             strokeColor: '#FF0000',
  49.             strokeOpacity: 1.0,
  50.             strokeWeight: 2
  51.         });
  52.      
  53.         //inicializo
  54.         initialize();
  55.      
  56.         function initialize() {
  57.             //centrado
  58.             var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
  59.             //opciones
  60.             var mapOptions = {
  61.                 zoom: 1,
  62.                 center: myLatLng,
  63.                 mapTypeId: google.maps.MapTypeId.TERRAIN
  64.             };
  65.             //geocoder
  66.             geocoder = new google.maps.Geocoder();
  67.             //creo mapa
  68.             map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  69.            
  70.             //asigno polilinea al mapa
  71.             _poliLinea.setMap(map);
  72.         }
  73.      
  74.         function showAddress(s_address) {
  75.             var address = s_address;
  76.             //busco la direccion dada
  77.             geocoder.geocode( { 'address': address}, function(results, status) {
  78.               if (status == google.maps.GeocoderStatus.OK) {
  79.                 //centro el mapa en el resultado
  80.                 map.setCenter(results[0].geometry.location);
  81.                 //creo marcador
  82.                 var marker = new google.maps.Marker({
  83.                     map: map,
  84.                     position: results[0].geometry.location
  85.                 });
  86.                 //agrego punto a la linea
  87.                 agregarRuta(results[0].geometry.location)
  88.               } else {
  89.                 alert('Error: ' + status);
  90.               }
  91.             });
  92.          }
  93.          
  94.         function agregarRuta(o_punto){
  95.             //creo punto a partir de la dirección dada
  96.             var o_LL = new google.maps.LatLng(o_punto.Xa, o_punto.Ya)
  97.             //agrego el punto al array de la ruta
  98.             _path.push(o_LL);
  99.             //cargo la nueva ruta en la polilinea
  100.             _poliLinea.setPath(_path);
  101.             //centro el mapa en el último punto
  102.             map.setCenter(o_LL);
  103.             //Hago un poco de zoom
  104.             map.setZoom(6);
  105.         }
  106.         </script>
  107.     </body>
  108.     </html>