Menu
I need to allow travelers to use google maps to plot a route, and then query my database of points of interest (let's say, McDonald's locations) and then show all of these locations that are within a mile or two of the route they will be taking. The question is, how do I efficiently take the "driving directions" information that comes back from google (essentially an array of lat/long pairs), and turn that into an sql query to get locations that fall within a certain distance from the route?
It does not have to be super precise, and "as the bird flies" distances from the routes are just fine. I'm most concerned about it being reasonably efficient.
In the database, things are set up pretty basically with each entry having a latitude and longitude, but I can change the database schema as needed.
As an example, this site does what I want to do (if you give a starting point and ending point, it will show chevron stations that are near the highway you will be taking): http://www.chevron.com/products/stations/stationfinder/planyourroute.aspx
(source: karmatics.com)
776
Check this out
http://google-maps-utility-library-v3.googlecode.com/svn/tags/routeboxer/1.0/examples/routeboxer-v3.html
Here's the documentation: http://google-maps-utility-library-v3.googlecode.com/svn/tags/routeboxer/1.0/docs/examples.html
You could get the box coordinates from RouteBoxer and send that to a serverside script for processing
181
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon arrays</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 19.2570, lng: 72.8712},
zoom: 10,
});
var directionService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
var request = {
origin: "<?php echo $source;?>",
destination: "<?php echo $destination;?>",
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
directionService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
var path = result.routes[0].overview_path;
var poly = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
map: map,
});
poly.setPath(path);
var myTollLocations = [
<?php
isset($hello); //$hello is array which comes from database
foreach ($hello as $key => $value) {
?>
new google.maps.LatLng(<?php echo $hello[$key]->latitude;?>, <?php echo $hello[$key]->longitude;?>),
<?php
}
?>
];
for (var i = 0; i < myTollLocations.length ; i++) {
if (google.maps.geometry.poly.isLocationOnEdge(myTollLocations[i], poly,0.005)) {
console.log("found");
}else{
console.log("Not Found!");
}
};
<?php
$markersLocation = array($source, $destination);
foreach ($markersLocation as $key => $values) {
?>
//Source Marker( convert address to LatLng for marker)
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': '<?php echo $markersLocation[$key]?>'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
}
console.log(latitude);
console.log(longitude);
var myLatLng = {lat: latitude, lng: longitude};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'source',
icon: 'http://innowrap.com/clients/digitoll/ic_red_marker.png'
});
});
<?php
}
?>
} else {
alert("Directions query failed: " + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=ADD YOUR API KEY&libraries=geometry&callback=initMap"
async defer></script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
