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&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>
<script src="//maps.googleapis.com/maps/api/js?v=3.2&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
Post a Comment