Menu
My programming knowledge is very limited and I'm working on a college project that includes programming.
What I want to do is a map, that shows your current location and the locations of recycling points. I already did the current location part, and I used the fusion tables to display the recycling points on the map. But I also wanted to give the option of finding the shortest route between your current location and the the recycling points.
So what it would do was to calculate the distance between your current location and every recycling point, and show the shortest one.
Right now I'm trying to understand google maps api tutorials and I don't know if this is possible, using the fusion tables. So I wanted to know if anyone knows how to do this.
Thank you so much!
<!DOCTYPE html>
<html>
<head>
<section id="wrapper">
Clique no botão "permitir" para deixar o browser encontrar a sua localização
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<article>
</article>
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '350px';
mapcanvas.style.width = '450px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Coordenadas',
from: '1CwMDrcxebjsb8sjG42rbGVAZB25Zi7CvaLJXOCM'
},
});
layer.setMap(map)
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
</section>
</head>
<body>
</body>
</html>
394
UPDATE:
You may retrieve the nearest point coordinates by sending a query to Google Visualization API:
// Initiate the GViz query
var queryList = [];
queryList.push("SELECT Location FROM ");
queryList.push(tableId);
queryList.push(" ORDER BY ST_DISTANCE(Location, LATLNG(");
queryList.push(currentLat + "," + currentLng);
queryList.push(")) ");
queryList.push(" LIMIT 1");
var queryText = encodeURIComponent(queryList.join(''));
var query = new google.visualization.Query(
'http://www.google.com/fusiontables/gvizdata?tq=' +
queryText);
// Handling the result of nearest location query
query.send(function(response) {
dataTable = response.getDataTable();
// If there is any result
if (dataTable && dataTable.getNumberOfRows()) {
console.log("Nearest Point is: " + dataTable.getValue(0,0));
// Result holds the coordinates of nearest point
var result = dataTable.getValue(0,0).split(",");
// Creates a Google Map LatLng from "result"
var latlng = new google.maps.LatLng(result[0], result[1]);
showRoute(latlng);
}
});
You may check the live example Here.
You may use Distance Matrix Service for that purpose. You just read your origin from your current location and send a request to Distance Matrix Service for each recycling points. There is also an example at Distance Matrix Sample.
var mylocation = new google.maps.LatLng(CURRENT_LOCATION_LAT, CURRENT_LOCATION_LNG);
// Destination by address
var destination1 = "Stockholm, Sweden";
// or destination by lat and lng
var destination2 = new google.maps.LatLng(50.087692, 14.421150);
// Sending request
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [mylocation],
destinations: [destination1, destination2],
travelMode: google.maps.TravelMode.DRIVING,
avoidHighways: false,
avoidTolls: false
}, callback);
function callback(response, status) {
// See Parsing the Results for
// the basics of a callback function.
}
You can specify the Travel Mode which computes the duration accordingly.
google.maps.TravelMode.DRIVING (Default) indicates standard driving directions using the road network.
google.maps.TravelMode.BICYCLING requests bicycling directions via bicycle paths & preferred streets.
google.maps.TravelMode.TRANSIT requests directions via public transit routes. google.maps.TravelMode.WALKING requests walking directions via pedestrian paths & sidewalks.
51
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
