Tema: como guardar marcadores de google maps en un cookie?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/11/2012, 12:09
Avatar de maximendez88
maximendez88
 
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 7 meses
Puntos: 3
Sonrisa como guardar marcadores de google maps en un cookie?
buenas, bueno la pregunta me parece bastante clara, estoy intentando guardar maracadores de google maps en cookies para mantener la ruta o redibujarla aunque se actualice el navegador... he intentado hacer algo como esto... pero aun no logro comprender como poder hacerlo... espero que alguien se apiade de mi alma y me ayude... saludos, dejo mi codigo por las dudas



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>