Dibujar ruta para varios marcadores en Google Maps.

[sir_alvarix]

Hola!

Estoy haciendo un proyecto de la carrera y me encuentro con un problemilla que no sé resolver.

Quiero sacar en un mapa varios marcadores cuyas coordenadas tengo almacenadas en una base de datos, obtengo mediante la generación de un xml y voy sacando por javascript usando la API de Google Maps v3.

La parte javascript es algo como esto:

Código:

 var customIcons = {
     ....
    };

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(37.176487, -3.597929),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      downloadUrl("genXML.php?id="+id, function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lon")));
          var html = "<b>" + name + "</b> <br/>";
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
	  bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

Esto me da como resultado mostrar en el mapa todos los marcadores correspondientes.

Ahora bien, lo que necesito, es unir esos marcadores de manera que tuviese una RUTA, he probado con el método polyline pero no me hago con él.

Alguien me puede ayudar?

Gracias!!!

[maximendez88]

tengo el mismo problema que tu.... logro insertar varios marcadores, pero lo que aun no puedo lograr es que estos esten unidos con una linea.... si llegas a saber de alguna solucion... espero que me avises.... dejo mi codigo de google maps por las dudas... que alguien se apiade de nuestras almas....

Código HTML:

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyA07VHJApYzXc3uJgFEk4l04KaSABLyaVA"
      type="text/javascript"></script>
    <script type="text/javascript">

    var map = null;
    var geocoder = null;
	
    function initialize() {
      if (GBrowserIsCompatible()) {
		  
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 1);
		map.setMapType(G_HYBRID_MAP);
        map.setUIToDefault();
        geocoder = new GClientGeocoder();
      }
    }
	
	

    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
				
				
				
              map.setCenter(point, 6);
              var marker = new GMarker(point, {draggable: true});
              map.addOverlay(marker);
			  
			  
			  map.addOverlay(polyline);
			  
			  
			  
              
			  
			  
			  GEvent.addListener(marker, "dragend", function() {
                
				 document.getElementById('lat').value=marker.getPoint().lat();
                 document.getElementById('long').value=marker.getPoint().lng();
              });
              GEvent.addListener(marker, "click", function() {
                
				 document.getElementById('lat').value=marker.getPoint().lat();
                 document.getElementById('long').value=marker.getPoint().lng();
              });
			  
			  
			  
			  
	      GEvent.trigger(marker, "click");
            }
          }
        );
      }
    }
	
	
	
	
 

	
    </script>

[maximendez88]

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

Código HTML:

<html>
<head>
<meta charset="utf-8" />
 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<title>Test Google Maps</title>
</head>
<body>
    <!-- MAPA -->
    <div id="map_canvas" style="width: 600px; height: 600px;"></div>
    <input type="text" name="ciudad" id="ciudad" /> <button onclick="agregarCiudad();">Agregar</button>
    
    <!-- funcion para agregar ciudad. La separo porque es sólo ejemplo -->
    <script type="text/javascript">
        function agregarCiudad(){
            showAddress(document.getElementById('ciudad').value);
            document.getElementById('ciudad').value = '';
        }
    </script>
    
    <script type="text/javascript">
    //variables y objetos globales
    var map             //mapa
    var geocoder;       //geocoder
    var _path = [];     // ruta
    var _poliLinea = new google.maps.Polyline({ //polilinea
        path: _path,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
 
    //inicializo
    initialize();
 
    function initialize() {
        //centrado
        var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
        //opciones
        var mapOptions = {
            zoom: 1,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        //geocoder
        geocoder = new google.maps.Geocoder();
        //creo mapa
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        
        //asigno polilinea al mapa
        _poliLinea.setMap(map);
    }
 
    function showAddress(s_address) {
        var address = s_address;
        //busco la direccion dada
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            //centro el mapa en el resultado
            map.setCenter(results[0].geometry.location);
            //creo marcador
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            //agrego punto a la linea
            agregarRuta(results[0].geometry.location)
          } else {
            alert('Error: ' + status);
          }
        });
     }
     
    function agregarRuta(o_punto){
        //creo punto a partir de la dirección dada
        var o_LL = new google.maps.LatLng(o_punto.Xa, o_punto.Ya)
        //agrego el punto al array de la ruta
        _path.push(o_LL);
        //cargo la nueva ruta en la polilinea
        _poliLinea.setPath(_path);
        //centro el mapa en el último punto
        map.setCenter(o_LL);
        //Hago un poco de zoom
        map.setZoom(6);
    }
    </script>
</body>
</html>
 

[xavcabre]

Busco hacer lo mismo me podríais informar de como la habéis echo .
Muchas gracias