como mantener una ruta en google maps aunque actualice el navegador

maximendez88 · #1 (**permalink**) 19/11/2012, 11:23

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<html>
<head>
<meta charset="utf-8" />
 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<title>Test Google Maps</title>
</head>
<body>
    <!-- MAPA -->
    <div id="map_canvas" style="width: 600px; height: 600px;"></div>
    <input type="text" name="ciudad" id="ciudad" /> <button onclick="agregarCiudad();">Agregar</button>
    
    <!-- funcion para agregar ciudad. La separo porque es sólo ejemplo -->
    <script type="text/javascript">
        function agregarCiudad(){
            showAddress(document.getElementById('ciudad').value);
            document.getElementById('ciudad').value = '';
        }
    </script>
    
    <script type="text/javascript">
    //variables y objetos globales
    var map             //mapa
    var geocoder;       //geocoder
    var _path = [];     // ruta
    var _poliLinea = new google.maps.Polyline({ //polilinea
        path: _path,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
 
    //inicializo
    initialize();
 
    function initialize() {
        //centrado
        var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
        //opciones
        var mapOptions = {
            zoom: 1,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        //geocoder
        geocoder = new google.maps.Geocoder();
        //creo mapa
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        
        //asigno polilinea al mapa
        _poliLinea.setMap(map);
    }
 
    function showAddress(s_address) {
        var address = s_address;
        //busco la direccion dada
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            //centro el mapa en el resultado
            map.setCenter(results[0].geometry.location);
            //creo marcador
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            //agrego punto a la linea
            agregarRuta(results[0].geometry.location)
          } else {
            alert('Error: ' + status);
          }
        });
     }
     
    function agregarRuta(o_punto){
        //creo punto a partir de la dirección dada
        var o_LL = new google.maps.LatLng(o_punto.Xa, o_punto.Ya)
        //agrego el punto al array de la ruta
        _path.push(o_LL);
        //cargo la nueva ruta en la polilinea
        _poliLinea.setPath(_path);
        //centro el mapa en el último punto
        map.setCenter(o_LL);
        //Hago un poco de zoom
        map.setZoom(6);
    }
    </script>
</body>
</html>

chichote · #2 (**permalink**) 19/11/2012, 13:53

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.

maximendez88 · #3 (**permalink**) 19/11/2012, 14:16

muchas gracias por la respuesta... perdon por la ignorancia... pero como podria hacer para guardar tantos datos dentro de una cookie? saludos

chichote · #4 (**permalink**) 19/11/2012, 14:32

Cita:

Iniciado por maximendez88

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.

maximendez88 · #5 (**permalink**) 19/11/2012, 14:51

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<html>
    <head>
    <meta charset="utf-8" />
     <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <title>Test Google Maps</title>
 
 
<script type="text/javascript">
    function mantenermapa() 
    {
        if(document.cookie!="")
        {
             initialize();
        }
    }
 
</script>
 
 
 
 
 
 
    </head>
<body onload="mantenermapa()">
        <!-- MAPA -->
        <div id="map_canvas" style="width: 600px; height: 600px;"></div>
        <input type="text" name="ciudad" id="ciudad" /> <button onclick="agregarCiudad();">Agregar</button>
       
        <!-- funcion para agregar ciudad. La separo porque es sólo ejemplo -->
        <script type="text/javascript">
            function agregarCiudad(){
                showAddress(document.getElementById('ciudad').value);
                document.cookie="ciudad = document.getElementById('ciudad'); expires = 2 Dec 2015 23:59:59 GMT"
 
 
                document.getElementById('ciudad').value = '';
            }
        </script>
       
        <script type="text/javascript">
        //variables y objetos globales
        var map             //mapa
        var geocoder;       //geocoder
        var _path = [];     // ruta
        var _poliLinea = new google.maps.Polyline({ //polilinea
            path: _path,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
     
        //inicializo
        initialize();
     
        function initialize() {
            //centrado
            var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
            //opciones
            var mapOptions = {
                zoom: 1,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            //geocoder
            geocoder = new google.maps.Geocoder();
            //creo mapa
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
           
            //asigno polilinea al mapa
            _poliLinea.setMap(map);
        }
     
        function showAddress(s_address) {
            var address = s_address;
            //busco la direccion dada
            geocoder.geocode( { 'address': address}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                //centro el mapa en el resultado
                map.setCenter(results[0].geometry.location);
                //creo marcador
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                //agrego punto a la linea
                agregarRuta(results[0].geometry.location)
              } else {
                alert('Error: ' + status);
              }
            });
         }
         
        function agregarRuta(o_punto){
            //creo punto a partir de la dirección dada
            var o_LL = new google.maps.LatLng(o_punto.Xa, o_punto.Ya)
            //agrego el punto al array de la ruta
            _path.push(o_LL);
            //cargo la nueva ruta en la polilinea
            _poliLinea.setPath(_path);
            //centro el mapa en el último punto
            map.setCenter(o_LL);
            //Hago un poco de zoom
            map.setZoom(6);
        }
        </script>
    </body>
    </html>

chichote · #6 (**permalink**) 19/11/2012, 15:24

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.

maximendez88 · #7 (**permalink**) 20/11/2012, 13:51

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...

chichote · #8 (**permalink**) 20/11/2012, 13:58

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.

maximendez88 · #9 (**permalink**) 21/11/2012, 09:10

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???????????????????????