How to to Get Places (e.g Gas Stations) along Route Between Origin and Destination in Google Maps API

by
  1. Use the RouteBoxer to get an array of google.maps.LatLngBounds objects that cover the route.
  2. for each of those bounds use the Places library to search for the places.

Note that there are query limits and quotas on the places requests, so for long routes this may not be practical.

example

(however, looking at how the results are grouped, it looks like the places service is searching around the center of the bounds, rather than in the bounds, but it might be good enough for your needs).

code snippet:

var map = null;
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null; // km
var service = null;
var gmarkers = [];
var boxes = null;
var infowindow = new google.maps.InfoWindow();

function initialize() {
  // Default the map view to the continental U.S.
  var mapOptions = {
    center: new google.maps.LatLng(40, -80.5),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 8
  };

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

  routeBoxer = new RouteBoxer();

  directionService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer({
    map: map
  });

  // If there are any parameters at eh end of the URL, they will be in  location.search
  // looking something like  "?marker=3"

  // skip the first character, we are not interested in the "?"
  var query = location.search.substring(1);

  // split the rest at each "&" character to give a list of  "argname=value"  pairs
  var pairs = query.split("&");
  for (var i = 0; i < pairs.length; i++) {
    // break each pair at the first "=" to obtain the argname and value
    var pos = pairs[i].indexOf("=");
    var argname = pairs[i].substring(0, pos).toLowerCase();
    var value = pairs[i].substring(pos + 1).toLowerCase();

    // process each possible argname  -  use unescape() if theres any chance of spaces
    if (argname == "to") {
      document.getElementById('to').value = unescape(value);
    }
    if (argname == "from") {
      document.getElementById('from').value = unescape(value);
    }
    if (argname == "dist") {
      document.getElementById('distance').value = parseFloat(value);
    }
    if (argname == "type") {
      document.getElementById('type').value = unescape(value);
    }
    if (argname == "keyword") {
      document.getElementById('keyword').value = unescape(value);
    }
    if (argname == "name") {
      document.getElementById('name').value = unescape(value);
    }
    if (argname == "submit") {
      route();
    }
  }

}

function route() {
  // Clear any previous route boxes from the map
  clearBoxes();

  // Convert the distance to box around the route from miles to km
  distance = parseFloat(document.getElementById("distance").value) * 1.609344;

  var request = {
    origin: document.getElementById("from").value,
    destination: document.getElementById("to").value,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }

  // Make the directions request
  directionService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);

      // Box around the overview path of the first route
      var path = result.routes[0].overview_path;
      boxes = routeBoxer.box(path, distance);
      // alert(boxes.length);
      drawBoxes();
      findPlaces(0);
    } else {
      alert("Directions query failed: " + status);
    }
  });
}

// Draw the array of boxes as polylines on the map
function drawBoxes() {
  boxpolys = new Array(boxes.length);
  for (var i = 0; i < boxes.length; i++) {
    boxpolys[i] = new google.maps.Rectangle({
      bounds: boxes[i],
      fillOpacity: 0,
      strokeOpacity: 1.0,
      strokeColor: '#000000',
      strokeWeight: 1,
      map: map
    });
  }
}


function findPlaces(searchIndex) {
  var type = document.getElementById('type').value;
  var keyword = document.getElementById('keyword').value;
  var name = document.getElementById('name').value;
  var request = {
    bounds: boxes[searchIndex],
  };
  if (!!type && (type != "")) {
    if (type.indexOf(',') > 0)
      request.types = type.split(',');
    else
      request.types = [type];
  }
  if (!!keyword && (keyword != "")) request.keyword = keyword;
  if (!!name && (name != "")) request.name = name;
  service.nearbySearch(request, function(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      document.getElementById('side_bar').innerHTML += "bounds[" + searchIndex + "] returns " + results.length + " results<br>"
      for (var i = 0, result; result = results[i]; i++) {
        var marker = createMarker(result);
      }
    } else {
      document.getElementById('side_bar').innerHTML += "bounds[" + searchIndex + "] returns 0 results<br>&nbsp;status=" + status + "<br>";
    }
    if (status != google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT) {
      searchIndex++;
      if (searchIndex < boxes.length)
        findPlaces(searchIndex);
    } else { // delay 1 second and try again
      setTimeout("findPlaces(" + searchIndex + ")", 1000);
    }

  });
}

// Clear boxes currently on the map
function clearBoxes() {
  if (boxpolys != null) {
    for (var i = 0; i < boxpolys.length; i++) {
      boxpolys[i].setMap(null);
    }
  }
  boxpolys = null;
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  if (place.icon) {
    var image = new google.maps.MarkerImage(
      place.icon, new google.maps.Size(71, 71),
      new google.maps.Point(0, 0), new google.maps.Point(17, 34),
      new google.maps.Size(25, 25));
  } else var image = {
    url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
    size: new google.maps.Size(7, 7),
    anchor: new google.maps.Point(3.5, 3.5)
  };

  var marker = new google.maps.Marker({
    map: map,
    icon: image,
    position: place.geometry.location
  });
  var request = {
    reference: place.reference
  };
  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(request, function(place, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        var contentStr="<h5>" + place.name + '</h5><p>' + place.formatted_address;
        if (!!place.formatted_phone_number) contentStr += '<br>' + place.formatted_phone_number;
        if (!!place.website) contentStr += '<br><a target="_blank" href="' + place.website + '">' + place.website + '</a>';
        contentStr += '<br>' + place.types + '</p>';
        infowindow.setContent(contentStr);
        infowindow.open(map, marker);
      } else {
        var contentStr = "<h5>No Result, status=" + status + "</h5>";
        infowindow.setContent(contentStr);
        infowindow.open(map, marker);
      }
    });

  });
  gmarkers.push(marker);
  if (!place.name) place.name = "result " + gmarkers.length;
  var side_bar_html = "<a href="javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");">" + place.name + "</a><br>";
  document.getElementById('side_bar').innerHTML += side_bar_html;
}

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?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/denissellu/routeboxer@master/src/RouteBoxer.js" type="text/javascript"></script>
<table border="1">
  <tr>
    <td valign="top">
      <div id="map" style="width: 600px; height: 500px;"></div>
    </td>
    <td>
      <div id="side_bar" style="width:200px; height: 600px; overflow: auto"></div>
    </td>
  </tr>
</table>
Box within at least
<input type="text" id="distance" value="3" size="2">miles of the route from
<input type="text" id="from" value="denver" />to
<input type="text" id="to" value="oklahoma city, OK" />
<input type="submit" onclick="route()" />
<br>
<label>type</label>
<input type="text" id="type" value="gas_station" />
<label>keyword</label>
<input type="text" id="keyword" value="" />
<label>name</label>
<input type="text" id="name" value="" />
<div id="towns"></div>

More Related Contents:

  1. Google Maps API 3 – Custom marker color for default (dot) marker
  2. close InfoWindow before open another
  3. Using Icon Fonts as Markers in Google Maps V3
  4. Google Maps single country boundary [closed]
  5. Google Places API – REQUEST_DENIED
  6. Retrieve latitude and longitude of a draggable pin via Google Maps API V3
  7. Change marker size in Google maps V3
  8. Trigger event with infoWindow or InfoBox on click Google Map API V3
  9. Google has started highlighting search areas in Pink color. Is this feature available in Google Maps API 3?
  10. How to get a click event when a user clicks a (business) place on the map
  11. ‘item.geometry.location.kb’ and ‘item.geometry.location.jb’ returning undefined
  12. click event listener on styled map icons and labels
  13. disable clickable landmark on google map
  14. Leaflet Map API with Google Satellite Layer [duplicate]
  15. Correct redirect URI for Google API and OAuth 2.0
  16. To get more than 5 reviews from google places API
  17. Highlighting borders of state and cities of US in Google Map API 3
  18. The key provided is not a valid Google API Key
  19. Directions API overview_polyline doesn’t have correct points
  20. Sending a details request to Google Places API – (CORS error) [duplicate]
  21. Calculate distance between two points in google maps V3
  22. Rotating image / marker image on Google map V3
  23. Exceed 23 waypoint per request limit on Google Directions API (Business/Work level)
  24. Google Maps API v3 adding an InfoWindow to each marker
  25. CORS and Google Maps Places Autocomplete API calls [duplicate]
  26. Google Maps Api v3 – getBounds is undefined
  27. How do I remove default markers?
  28. Google Maps API v3 Highlight Country Border without using Polygons
  29. How long do the new Places API session tokens last?
  30. Do not change map center or zoom level when rendering directions

Leave a Comment