Find places close by a route using Google Maps API V3 and RouteBoxer

Posted on November 4, 2014, 9:00 am by about-dev.com


I am using google maps api v3 for a personal project. I have a set of records in the database for different kind of places with gps coordinates. For a custom route, eventually chosen by a user, I wanted to dynamically search and attach the nearby places. The purpose for all of these would be that a user to find out what other places could be of his interest and he could visit in his way or with a minimum detour.

Looking for a solution for this, I found a library, RouteBoxer, that works with routes generated by google maps and somehow calculates the surrounding of a route and splits the area in multiple rectangular objects.

The hard work was done, all of the following are just a few easy steps.

For each of these rectangular objects, the library gives me the coordinates of the corners. After that I have to query the database in searching for places having coordinates inside of this rectangle.

Starting from the beginning, this is what we have to do:

1. place the google maps container

<div id="google_map" class="google_map" style="width: 750px; height: 500px;"></div>

2. load the js libraries: google maps api v3 and RouteBoxer

<script src="//maps.googleapis.com/maps/api/js?v=3.2&amp;sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js"></script>

3. write a few lines of javascript code that should:

- create a route from Ioannina to Praga

- calculate the boxes for the route

- obtain the places within the boxes boundaries and place them on the map

//placing a marker on the map
function createMarker(map, coords, title) {
 var marker = new google.maps.Marker({
  position: coords,
  map: map,
  title: title,
  draggable: false
 });
 return marker;
}

//Search places having coordinates inside the boxes
function findPlaces(boxes) {
 var data = "";
 for (var i = 0; i < boxes.length; i++) {
  //form the query string that will be sent via ajax
  if (data != "") {
   data += "&";
  }
  data += "boxes[]=" + boxes[i].getNorthEast().lat() + ":" + boxes[i].getNorthEast().lng() + "-" + boxes[i].getSouthWest().lat() + ":" + boxes[i].getSouthWest().lng();
 }

 if (data != "") {
  //make an ajax request to query the database
  //suppose that the response would be a JSON similar to this
  var response = '[{"title":"Dodona Site","latitude":"39.546135","longitude":"20.785105"},{"title":"Perama Cave","latitude":"39.695000","longitude":"20.846457"},{"title":"Trikorfo Castle","latitude":"39.298645","longitude":"20.367601"}]';
  var places= JSON.parse(response);
  for (i in places) {
   var coords = new google.maps.LatLng(places[i].latitude, places[i].longitude);
   createMarker(map, coords, places[i].title);
  }
 }
}

//create the map
var map = new google.maps.Map(document.getElementById("google_map"), {
 center: new google.maps.LatLng(40,20),
 zoom: 7,
 mapTypeId: google.maps.MapTypeId.DRIVING
});

//instantiate the RouteBoxer library
var routeBoxer = new RouteBoxer();

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

var request = {
 origin: "ioannina",
 destination: "parga",
 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;
  var distance = 10;//km
  var boxes = routeBoxer.box(path, distance);
  findPlaces(boxes);
 } else {
  //console.log("Directions query failed: " + status);
 }
});

You can view a working example here.


Leave a Comment:

User
Email
Website

Blog Search

Popular Blog Categories

Newsletter

Want to be informed about latest posts? Subscribe to our newsletter