Tema: unir marcadores con google maps
Ver Mensaje Individual
  #19 (permalink)  
Antiguo 05/12/2012, 10:20
Avatar de maximendez88
maximendez88
 
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 12 años, 2 meses
Puntos: 3
Sonrisa Respuesta: unir marcadores con google maps
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>

bueno, he estado utilizando el código que me pasaste...localmente me funciono, solo que cuando lo pruebo en mi servidor no funciona... cada vez que actualizo el navegador pierdo la ruta que fui marcando...