Directions To Marker With Google Maps Api

So I'm using the Google Maps API and currently I have a custom marker that highlights the location. What I would like to do, if possible, is be able to click it and have it bring u

Solution 1:

Your code with the directions handling from this example. The original functionality was written by Mike Williams for the Google Maps Javascript API v2 (which is now deprecated and turned off). So this Javascript is based on code provided by the Community Church Javascript Team (http://www.bisphamchurch.org.uk/, http://econym.org.uk/gmap/)

proof of concept fiddle

code snippet:

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
// arrays to hold copies of the markers and html used by the side_bar // because the function closure trick doesnt work there var gmarkers = [];
var htmls = [];

// arrays to hold variants of the info window html with get direction forms openvar to_htmls = [];
var from_htmls = [];

// global "map" variablevar map = null;

var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});


functioninitialize() {

  var location = new google.maps.LatLng(50.871622, -4.131561);

  var mapOptions = {
    center: location,
    zoom: 11,
    scrollwheel: false
  };

  map = new google.maps.Map(document.getElementById("map"),
    mapOptions);

  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  var image = {
    url: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
  };
  var marker = new google.maps.Marker({
    position: location,
    map: map,
    animation: google.maps.Animation.DROP,
    icon: image,
    title: 'Deer Park Dairy'
  });

  var i = gmarkers.length;
  latlng = location;

  // The info window version with the "to here" form open
  to_htmls[i] = html + '<br>Directions: <b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' +
    '<br>Start address:<form action="javascript:getDirections()">' +
    '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
    '<INPUT value="Get Directions" TYPE="button" onclick="getDirections()"><br>' +
    'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
    '<input type="hidden" id="daddr" value="' + latlng.lat() + ',' + latlng.lng() +
    '"/>';
  // The info window version with the "from here" form open
  from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' +
    '<br>End address:<form action="javascript:getDirections()">' +
    '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
    '<INPUT value="Get Directions" TYPE="SUBMIT"><br>' +
    'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
    '<input type="hidden" id="saddr" value="' + latlng.lat() + ',' + latlng.lng() +
    '"/>';
  // The inactive version of the direction infovar html = marker.getTitle() + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <a href="javascript:fromhere(' + i + ')">From here<\/a>';
  var contentString = html;

  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(15);
    map.setCenter(marker.getPosition());
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  // save the info we need to use later for the side_bar
  gmarkers.push(marker);
  htmls[i] = html;
}

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

// ===== request the directions =====functiongetDirections() {
  // ==== Set up the walk and avoid highways options ====var request = {};
  if (document.getElementById("walk").checked) {
    request.travelMode = google.maps.DirectionsTravelMode.WALKING;
  } else {
    request.travelMode = google.maps.DirectionsTravelMode.DRIVING;
  }

  if (document.getElementById("highways").checked) {
    request.avoidHighways = true;
  }
  // ==== set the start and end locations ====var saddr = document.getElementById("saddr").value;
  var daddr = document.getElementById("daddr").value;

  request.origin = saddr;
  request.destination = daddr;
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } elsealert("Directions not found:" + status);
  });
}


// This function picks up the click and opens the corresponding info windowfunctionmyclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}


// functions that open the directions formsfunctiontohere(i) {
  // gmarkers[i].openInfoWindowHtml(to_htmls[i]);
  infowindow.setContent(to_htmls[i]);
  infowindow.open(map, gmarkers[i]);
}

functionfromhere(i) {
  // gmarkers[i].openInfoWindowHtml(from_htmls[i]);
  infowindow.setContent(from_htmls[i]);
  infowindow.open(map, gmarkers[i]);
}

// This Javascript is based on code provided by the// Community Church Javascript Team// http://www.bisphamchurch.org.uk/   // http://econym.org.uk/gmap/// from the v2 tutorial page at:// http://econym.org.uk/gmap/basic3.htm

html,
body,
table {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
td,
tr {
  height: 100%;
  width: 50%;
}

<scriptsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script><table><tr><td><divid="map"style="width:100%; height:100%; border: 2px solid #3872ac;"></div></td><td><divid="directionsPanel"></div></td></tr></table>

Solution 2:

Google Maps API has been updated and now, when you get your bearing updates, you can do the following:

val position = LatLng(latitude, longitude)
map.addMarker(MarkerOptions().position(position).title(title).icon(icon).flat(true).
              rotation(heading.toFloat()))

Don't forget to flat your marker. It ensures the marker is north aligned so that the bearing will work correctly even if the user rotates the map.