Ver Mensaje Individual
  #2 (permalink)  
Antiguo 20/09/2012, 14:31
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

Me tomé el trabajo de ordenar tu código y convertirlo a la versión 3 de la API. Esto es porque en la versión que utilizas no se podía usar setPath() (o al menos yo no podía). Además la v3 es más limpia y moderna. Además comenté el código para hacer bien claro qué se hace paso a paso:

Código Javascript:
Ver original
  1. //variables y objetos globales
  2. var map             //mapa
  3. var geocoder;       //geocoder
  4. var _path = [];     // ruta
  5. var _poliLinea = new google.maps.Polyline({ //polilinea
  6.     path: _path,
  7.     strokeColor: '#FF0000',
  8.     strokeOpacity: 1.0,
  9.     strokeWeight: 2
  10. });
  11.  
  12. //inicializo
  13. initialize();
  14.  
  15. //cargo un par de ciudades de ejemplo
  16. showAddress('buenos aires');
  17. showAddress('montevideo');
  18. showAddress('sao paulo');
  19.  
  20. function initialize() {
  21.     //centrado
  22.     var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
  23.     //opciones
  24.     var mapOptions = {
  25.         zoom: 1,
  26.         center: myLatLng,
  27.         mapTypeId: google.maps.MapTypeId.TERRAIN
  28.     };
  29.     //geocoder
  30.     geocoder = new google.maps.Geocoder();
  31.     //creo mapa
  32.     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  33.    
  34.     //asigno polilinea al mapa
  35.     _poliLinea.setMap(map);
  36. }
  37.  
  38. function showAddress(s_address) {
  39.     var address = s_address;
  40.     //busco la direccion dada
  41.     geocoder.geocode( { 'address': address}, function(results, status) {
  42.       if (status == google.maps.GeocoderStatus.OK) {
  43.         //centro el mapa en el resultado
  44.         map.setCenter(results[0].geometry.location);
  45.         //creo marcador
  46.         var marker = new google.maps.Marker({
  47.             map: map,
  48.             position: results[0].geometry.location
  49.         });
  50.         //agrego punto a la linea
  51.         agregarRuta(results[0].geometry.location)
  52.       } else {
  53.         alert('Error: ' + status);
  54.       }
  55.     });
  56.  }
  57.  
  58. function agregarRuta(o_punto){
  59.     //creo punto a partir de la dirección dada
  60.     var o_LL = new google.maps.LatLng(o_punto.Xa, o_punto.Ya)
  61.     //agrego el punto al array de la ruta
  62.     _path.push(o_LL);
  63.     //cargo la nueva ruta en la polilinea
  64.     _poliLinea.setPath(_path);
  65.     //centro el mapa en el último punto
  66.     map.setCenter(o_LL);
  67.     //Hago un poco de zoom
  68.     map.setZoom(6);
  69. }

-edit-
Este es el script que tenés que incluir ahora:
Código HTML:
Ver original
  1. <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Acá lo ves en funcionamiento: http://jsbin.com/uzizow/1/
__________________
nahueljose.com.ar

Última edición por Naahuel; 20/09/2012 a las 14:40