Google Maps API v3 - Plot route from marker on link click

Question

I currently have a simple Google Map, using API v3, with a custom marker (PNG file) displayed on a web page:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
function initialize() {
    var myLatlng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
    var markerLatLng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
    var image = new google.maps.MarkerImage('/img/location/marker.png',
    // This marker is 125 pixels wide by 109 pixels tall.
    new google.maps.Size(125, 109),
    // The origin for this image is 0,0 (left,top).
    new google.maps.Point(0,0),
    // The anchor for this image is towards the bottom left of the image (left,top).
    new google.maps.Point(4, 105));

    var CustomMarker = new google.maps.Marker({
        position: markerLatLng,
        map: map,
        icon: image,
        animation: google.maps.Animation.DROP
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

What I'd like to do is add a list of cities (not in a form <select> tag) below the map:

<ul>
    <li><a href="#">Leeds</a></li>
    <li><a href="#">York</a></li>
    <li><a href="#">Wakefield</a></li>
    <li><a href="#">Harrogate</a></li>
</ul>

When the user clicks on a city link, I'd like the Google Map to plot the driving route from my marker to the city and zoom out to fit the route.

When the user clicks on a different city afterwards, a new driving route should be plotted from my marker to the city clicked on.

I'm using jQuery on the page already, so perhaps it could be used for this?

I have no idea where to start I'm afraid! Any help or advice would be very much appreciated.

Thanks a lot.

Answer 1

1. You can use the directions service to get directions from a google.maps.LatLng (the position of your marker) to an address (the text of your <li> tags.

2. use JQuery to get the text of the <li>'s and pass that into the directions service (you need to give the unordered list an id to do that)

   $("#citylist").on("click", "li", function () {
     getDirections($(this).text());
   });
   

HTML:

<ul id="citylist">
    <li><a href="#">Leeds</a></li>
    <li><a href="#">York</a></li>
    <li><a href="#">Wakefield</a></li>
    <li><a href="#">Harrogate</a></li>
</ul>
<div id="map_canvas"></div>

code:

var map = null;
var CustomMarker = null;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

function initialize() {
    $("#citylist").on("click", "li", function () {
    getDirections($(this).text());
    });
    var myLatlng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
    var markerLatLng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    CustomMarker = new google.maps.Marker({
        position: markerLatLng,
        map: map,
        icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        animation: google.maps.Animation.DROP
    });
    directionsDisplay.setMap(map);
}



function getDirections(destination) {
    var start = CustomMarker.getPosition();
    var dest = destination;
    var request = {
        origin: start,
        destination: dest,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

working fiddle