Ver Mensaje Individual
  #3 (permalink)  
Antiguo 19/11/2012, 13:52
Avatar de maximendez88
maximendez88
 
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 7 meses
Puntos: 3
Respuesta: Dibujar ruta para varios marcadores en Google Maps.

te dejo un ejemplo que me pasaron que fue muy util... por las dudas que aun sigas con el mismo problema


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