Foros del Web » Programando para Internet » Javascript » Frameworks JS »

como mantener una ruta en google maps aunque actualice el navegador

Estas en el tema de como mantener una ruta en google maps aunque actualice el navegador en el foro de Frameworks JS en Foros del Web. buenas... soy algo nuevo en esto de google maps... estoy teniendo un problema el cual quizas alguien me pueda dar una mano... de principio tengo ...
  #1 (permalink)  
Antiguo 19/11/2012, 11:23
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 3
Pregunta como mantener una ruta en google maps aunque actualice el navegador

buenas... soy algo nuevo en esto de google maps... estoy teniendo un problema el cual quizas alguien me pueda dar una mano... de principio tengo un mapa en google maps que me va pidiendo ciudades, y al ir agregandolas se va formando la ruta con marcadores, hasta ahi todo perfecto, mi problema esta que esta ruta cuando actualizo el navegador desaparece... alguien tiene alguna idea de como puedo hacer para que esta no desaparezca al actualizar el navegador? saludos dejo mi codigo por las dudas q alguien se apiade de mi alma....



Código PHP:
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. </head>
  7. <body>
  8.     <!-- MAPA -->
  9.     <div id="map_canvas" style="width: 600px; height: 600px;"></div>
  10.     <input type="text" name="ciudad" id="ciudad" /> <button onclick="agregarCiudad();">Agregar</button>
  11.    
  12.     <!-- funcion para agregar ciudad. La separo porque es sólo ejemplo -->
  13.     <script type="text/javascript">
  14.         function agregarCiudad(){
  15.             showAddress(document.getElementById('ciudad').value);
  16.             document.getElementById('ciudad').value = '';
  17.         }
  18.     </script>
  19.    
  20.     <script type="text/javascript">
  21.     //variables y objetos globales
  22.     var map             //mapa
  23.     var geocoder;       //geocoder
  24.     var _path = [];     // ruta
  25.     var _poliLinea = new google.maps.Polyline({ //polilinea
  26.         path: _path,
  27.         strokeColor: '#FF0000',
  28.         strokeOpacity: 1.0,
  29.         strokeWeight: 2
  30.     });
  31.  
  32.     //inicializo
  33.     initialize();
  34.  
  35.     function initialize() {
  36.         //centrado
  37.         var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
  38.         //opciones
  39.         var mapOptions = {
  40.             zoom: 1,
  41.             center: myLatLng,
  42.             mapTypeId: google.maps.MapTypeId.TERRAIN
  43.         };
  44.         //geocoder
  45.         geocoder = new google.maps.Geocoder();
  46.         //creo mapa
  47.         map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  48.        
  49.         //asigno polilinea al mapa
  50.         _poliLinea.setMap(map);
  51.     }
  52.  
  53.     function showAddress(s_address) {
  54.         var address = s_address;
  55.         //busco la direccion dada
  56.         geocoder.geocode( { 'address': address}, function(results, status) {
  57.           if (status == google.maps.GeocoderStatus.OK) {
  58.             //centro el mapa en el resultado
  59.             map.setCenter(results[0].geometry.location);
  60.             //creo marcador
  61.             var marker = new google.maps.Marker({
  62.                 map: map,
  63.                 position: results[0].geometry.location
  64.             });
  65.             //agrego punto a la linea
  66.             agregarRuta(results[0].geometry.location)
  67.           } else {
  68.             alert('Error: ' + status);
  69.           }
  70.         });
  71.      }
  72.      
  73.     function agregarRuta(o_punto){
  74.         //creo punto a partir de la dirección dada
  75.         var o_LL = new google.maps.LatLng(o_punto.Xa, o_punto.Ya)
  76.         //agrego el punto al array de la ruta
  77.         _path.push(o_LL);
  78.         //cargo la nueva ruta en la polilinea
  79.         _poliLinea.setPath(_path);
  80.         //centro el mapa en el último punto
  81.         map.setCenter(o_LL);
  82.         //Hago un poco de zoom
  83.         map.setZoom(6);
  84.     }
  85.     </script>
  86. </body>
  87. </html>
  #2 (permalink)  
Antiguo 19/11/2012, 13:53
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 19 años, 3 meses
Puntos: 145
Respuesta: como mantener una ruta en google maps aunque actualice el navegador

Puedes solucionar el problema almacenando los valores en Cookies, y cuando se refresca la pagina verificas si la cookie es vacia o tiene info, en caso de que tenga info dibujas la ruta.

Saludos.
__________________
http://chicho.ninja yiaaaa
  #3 (permalink)  
Antiguo 19/11/2012, 14:16
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 3
Respuesta: como mantener una ruta en google maps aunque actualice el navegador

muchas gracias por la respuesta... perdon por la ignorancia... pero como podria hacer para guardar tantos datos dentro de una cookie? saludos
  #4 (permalink)  
Antiguo 19/11/2012, 14:32
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 19 años, 3 meses
Puntos: 145
Respuesta: como mantener una ruta en google maps aunque actualice el navegador

Cita:
Iniciado por maximendez88 Ver Mensaje
muchas gracias por la respuesta... perdon por la ignorancia... pero como podria hacer para guardar tantos datos dentro de una cookie? saludos
Las cookies son limitadas en la cantidad de info que pueden almacenar, si es demaciada data te recomiendo trabajar con html5 y alguno de sus metodos de almacenamiento en el cliente, te dejo este link http://www.cristalab.com/tutoriales/...rage-c104009l/

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

Pero con la cookie solo estas inicializando el mapa, pero ese mapa se inicializa en cero, es lo mismo que refrescaras sin utilizar cookie, en la cookie debes almacenar la informacion que vas rescatando dinamicamente para construir la ruta. Y luego al cargar la web inicializar el mapa con esos valores para que se dibuje la ruta con los puntos que tienes en tu cookie.
__________________
http://chicho.ninja yiaaaa
  #7 (permalink)  
Antiguo 20/11/2012, 13:51
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 3
Respuesta: como mantener una ruta en google maps aunque actualice el navegador

tambien lo probe poniendo toda la funcion del script y no funciono.... hay alguna forma de guardar marcadores en un array o algo parecido? la verdad no me hallo con el problema...
  #8 (permalink)  
Antiguo 20/11/2012, 13:58
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 19 años, 3 meses
Puntos: 145
Respuesta: como mantener una ruta en google maps aunque actualice el navegador

Una consulta, entiendes cada linea del codigo javascript que estas empleando para gmap? me da la idea de que no, primero parte por ahi, a medida que lo vayas comprendiendo te iras respondiendo tus propias dudas.

Saludos.
__________________
http://chicho.ninja yiaaaa
  #9 (permalink)  
Antiguo 21/11/2012, 09:10
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 3
Pregunta Respuesta: como mantener una ruta en google maps aunque actualice el navegador

las lineas las entiendo perfectamente... lo que esta sucediendo es que no estoy sabiendo como guardar los puntos en cookies.. alguien tendra algun ejemplo de algo parecido???????????????????????

Última edición por maximendez88; 23/11/2012 a las 14:08 Razón: se de lo q hablo

Etiquetas: actualice, aunque, funcion, google, html, input, javascript, js, maps, ruta
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:32.