Google Geolocation and Direction API

Question

How do you combine both Google Geolocation and Direction API such that when you click the geolocation marker and any one of the markers (of which I hardcoded the coordinates), it will show the direction betweeen both of them.

Geolocation code

<script type="text/javascript">
  function initialize() {
    var locations = [
     ['Hougang', 1.37265, 103.893658],
     ['Punggol', 1.400617, 103.907833],
     ['MacRitchie Reservoir', 1.346002, 103.825436],
     ['Bishan', 1.352051, 103.849125],
     ['Sentosa', 1.251226, 103.830757]
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(1.37265, 103.893658),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    // Check if user support geo-location
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var geolocpoint = new google.maps.LatLng(latitude, longitude);
        var mapOptions = {
          zoom: 8,
          center: geolocpoint,
          mapTypeId: google.maps.MapTypeId.HYBRID
        }
        // Place a marker
        var geolocation = new google.maps.Marker({
          position: geolocpoint,
          map: map,
          title: 'Your geolocation',
          icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
        });
      });
    }
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

• Add a click listener to the markers.
• When it executes, push the position of the current marker on an array.
• If the length of the array is two, call the directions service with those two locations as the start and end points.

Similar to this example, but instead of a "map" click listener, use "marker" click listeners.

You did say you wanted to force the first click to be on the geolocation marker, you need to write code to check the location of the marker and verify it is the geolocation marker if you want to do that. I would think it would be simpler to just have the user click on one of the destination markers, then generate directions from the geolocation marker (which you would need to keep a special reference to).

Example that assumes the start is the geolocation point

code snippet from example:

var geolocation = null;
  var ren = null;

  function initialize() {

    var locations = [
      ['Hougang', 1.37265, 103.893658],
      ['Punggol', 1.400617, 103.907833],
      ['MacRitchie Reservoir', 1.346002, 103.825436],
      ['Bishan', 1.352051, 103.849125],
      ['Sentosa', 1.251226, 103.830757]
    ];

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 13,
      center: new google.maps.LatLng(1.37265, 103.893658),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    // Place a marker
    geolocation = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      title: 'Your geolocation',
      icon: 'https://maps.google.com/mapfiles/ms/micons/green.png'
    });


    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
          if (ren && ren.getMap()) ren.setMap(null);
          ren = new google.maps.DirectionsRenderer({
            'draggable': true
          });
          ren.setMap(map);
          ren.setPanel(document.getElementById("directionsPanel"));
          ser = new google.maps.DirectionsService();

          //Cria a rota, o DirectionTravelMode pode ser: DRIVING, WALKING, BICYCLING ou TRANSIT
          ser.route({
            'origin': geolocation.getPosition(),
            'destination': marker.getPosition(),
            'travelMode': google.maps.DirectionsTravelMode.DRIVING
          }, function(res, sts) {
            if (sts == 'OK') ren.setDirections(res);
          })
        }
      })(marker, i));
    }

    // Check if user support geo-location
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var geolocpoint = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {
            zoom: 8,
            center: geolocpoint,
            mapTypeId: google.maps.MapTypeId.HYBRID
          }
          // Place a marker
        geolocation = new google.maps.Marker({
          position: geolocpoint,
          map: map,
          title: 'Your geolocation',
          icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
        });
      });
    } else {
      // Place a marker
      geolocation = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        title: 'Your geolocation',
        icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
      });
    }
  }
  google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>