Tema: unir marcadores con google maps
Ver Mensaje Individual
  #16 (permalink)  
Antiguo 26/11/2012, 18:43
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 8 meses
Puntos: 192
Respuesta: unir marcadores con google maps
Te dejo un ejemplo de una posible solución para guardar las ubicaciones.

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

Digo posible porque estoy usando una nueva funcionalidad llamada localStorage y JSON.parse() y JSON.stringify(). La primera permite almacenar contenido desde JavaScript en el navegador, el cual estará disponible después cuando yo lo necesite. Su soporte es relativamente bueno: http://www.html5rocks.com/en/features/storage

Si te fijás en el ejemplo, podés encontrar las líneas que guardan y que restauran lo que se guardo cuando se entre una segunda vez.

La otra opción podría ser usar cookies, pero eso requeriría también usar AJAX para guardar cada ciudad que se agregue en la cookie. Luego, al cargar la página, verificar si existe la cookie y cargar las ciudades que se guardaron.
__________________
nahueljose.com.ar