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

<div id="google_map" class="google_map" style="width: 750px; height: 500px;"></div>
<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>

<script type="text/javascript">
  //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 = '[{"latitude":"39.546135","longitude":"20.785105"},{"latitude":"39.695000","longitude":"20.846457"},{"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);
 }
});
</script>

Comments

Popular Posts

How to pass hash in Postman

nginx: unrecognized service

Reading Excel Sheets using "Roo" gem in ruby on rails

Bootstrap Select Picker append add new item if search not exist

Add CORS to Nginx on AWS Elastic Beanstalk

Enable gzip compression on Elastic Beanstalk with nginx

Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'

Get video duration by URL in Ruby on Rails

site-enables nginx setting in ruby in rails