Ver Mensaje Individual
  #15 (permalink)  
Antiguo 11/11/2012, 12:32
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

Tarde, pero seguro :P

Se podría usar el parámetro geodesic para las polilineas. Lo que hace es dibujar la distancia más corta tomando en cuenta la curvatura de la tierra. Sólo se notará la curvatura en distancias largas, eso si.

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