How To Draw A Route Between Two Markers In Google Maps Api?

I have a requirement where, onclick, I have to draw a route in between two markers when I select. I have successfully uploaded a KML file on Google MAPS API, so the markers are cle

Solution 1:

example

add a custom "createMarker" function to geoxml3 which adds a function to the marker's click listener to trigger the directions service.

// global variablesvar directions = {};
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

// geoxml3 configurationvar geoXml = new geoXML3.parser({
    map: map,
    createMarker: createMarker,
    singleInfoWindow: true
});

// handle the directions servicefunctionprocessMarkerClick(latLng) {
    if (!directions.start) {
        directions.start = latLng;
    }
    elseif (!directions.end) {
        directions.end = latLng;
        directionsService.route({
            origin:directions.start,
            destination: directions.end,
            travelMode: google.maps.TravelMode.DRIVING
        },
        function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
                directionsDisplay.setMap(map);

            }
            else {
                alert("Directions Request failed:" +status);
            }
            directions.start = null;
            directions.end = null;
        });
    }
}

// custom createMarker function to add hook for the directions service // (modified from the version in the geoxml3 source)var createMarker = function (placemark, doc) {
    // create a Marker to the map from a placemark KML object// Load basic marker propertiesvar markerOptions = geoXML3.combineOptions(geoXml.options.markerOptions, {
        map:      geoXml.options.map,
        position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
        title:    placemark.name,
        zIndex:   Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
        icon:     placemark.style.icon,
        shadow:   placemark.style.shadow 
    });

    // Create the marker on the mapvar marker = new google.maps.Marker(markerOptions);
    if (!!doc) {
        doc.markers.push(marker);
    }

    // Set up and create the infowindow if it is not suppressedif (!geoXml.options.suppressInfoWindows) {
        var infoWindowOptions = geoXML3.combineOptions(geoXml.options.infoWindowOptions, {
            content: '<div class="geoxml3_infowindow"><h3>' +
                     placemark.name + 
                     '</h3><div>' + 
                     placemark.description + 
                     '</div></div>',
            pixelOffset: new google.maps.Size(0, 2)
        });

        if (geoXml.options.infoWindow) {
            marker.infoWindow = geoXml.options.infoWindow;
        }
        else {
            marker.infoWindow = new google.maps.InfoWindow(infoWindowOptions);
        }
        marker.infoWindowOptions = infoWindowOptions;

        // Infowindow-opening event handler
        google.maps.event.addListener(marker, 'click', function() {
            processMarkerClick(marker.getPosition());
            this.infoWindow.close();
            marker.infoWindow.setOptions(this.infoWindowOptions);
            this.infoWindow.open(this.map, this);
        });
    }
    placemark.marker = marker;
    return marker;
};

Solution 2:

I think you have to get and set new coordinates when you do drag event. So you miss this event handler in your code in click event, such as this sample:

google.maps.event.addListener(trainpath, 'drag',function(event) {
  // set new coordinates for event, event.latLng.lat() and event.latLng.lng()
});

google.maps.event.addListener(trainpath, 'dragend',function(event) {
    // set new coordinates for event, event.latLng.lat() and event.latLng.lng()
}); 

Please also see in this thread: Google Maps drag and dragend event listeners wont work if marker created by click event listener

Sorry if this couldn't help.