Tema: unir marcadores con google maps
Ver Mensaje Individual
  #14 (permalink)  
Antiguo 06/11/2012, 13:47
Avatar de maximendez88
maximendez88
 
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 12 años, 2 meses
Puntos: 3
Pregunta Respuesta: unir marcadores con google maps
Cita:
Iniciado por Naahuel Ver Mensaje
Era un ejemplo... no son predefinidos. Hasta dejé el mismo nombre de la función showAddress.

Con suerte, sólo tenés que reemplazar el código nuevo y cambiar a la versión v3.

Te paso un ejemplo más elaborado. La única modificación al script que te hice anteriormente es que le saqué las llamadas a showAddress() que eran de ejemplo. Agregué un input para poner el nombre de la ciudad e ir actualizando el mapa y la línea.

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
  26.     var _poliLinea = new google.maps.Polyline({ //polilinea
  27.         path: _path,
  28.         strokeColor: '#FF0000',
  29.         strokeOpacity: 1.0,
  30.         strokeWeight: 2
  31.     });
  32.  
  33.     //inicializo
  34.     initialize();
  35.  
  36.     function initialize() {
  37.         //centrado
  38.         var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
  39.         //opciones
  40.         var mapOptions = {
  41.             zoom: 1,
  42.             center: myLatLng,
  43.             mapTypeId: google.maps.MapTypeId.TERRAIN
  44.         };
  45.         //geocoder
  46.         geocoder = new google.maps.Geocoder();
  47.         //creo mapa
  48.         map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  49.         
  50.         //asigno polilinea al mapa
  51.         _poliLinea.setMap(map);
  52.     }
  53.  
  54.     function showAddress(s_address) {
  55.         var address = s_address;
  56.         //busco la direccion dada
  57.         geocoder.geocode( { 'address': address}, function(results, status) {
  58.           if (status == google.maps.GeocoderStatus.OK) {
  59.             //centro el mapa en el resultado
  60.             map.setCenter(results[0].geometry.location);
  61.             //creo marcador
  62.             var marker = new google.maps.Marker({
  63.                 map: map,
  64.                 position: results[0].geometry.location
  65.             });
  66.             //agrego punto a la linea
  67.             agregarRuta(results[0].geometry.location)
  68.           } else {
  69.             alert('Error: ' + status);
  70.           }
  71.         });
  72.      }
  73.      
  74.     function agregarRuta(o_punto){
  75.         //creo punto a partir de la dirección dada
  76.         var o_LL = new google.maps.LatLng(o_punto.Xa, o_punto.Ya)
  77.         //agrego el punto al array de la ruta
  78.         _path.push(o_LL);
  79.         //cargo la nueva ruta en la polilinea
  80.         _poliLinea.setPath(_path);
  81.         //centro el mapa en el último punto
  82.         map.setCenter(o_LL);
  83.         //Hago un poco de zoom
  84.         map.setZoom(6);
  85.     }
  86.     </script>
  87. </body>
  88. </html>

Ahí podés ver cómo se agrega la nueva versión de google maps. No hace falta Key, es uno de los cambios de la versión 3.

Estoy 100% seguro que se puede adaptar a tu código. Perdón, pero es toda la ayuda que te puedo dar. Creo que con el código comentado que te dí no vas a tener dudas sobre cómo hacerlo.


Como seria para que la linea que marca la ruta en vez de que sea recta... sea curva? saludos