I'd like to draw an itinerary between 2 markers which are defined in this geoJSON file:
{
"type": "FeatureCollection",
"features":
[
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [-73.563032, 45.495403]},
"properties": {"prop0": "value0"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [-73.549762, 45.559673]},
"properties": {"prop0": "value0"}
}
]
}
The two markers are displayed well on the map.
Now I want to create an itinerary (car), between those two points.
I have this javascript function, which allows me to draw an itinerary from a form filled by the user:
function calculate() {
origin = document.getElementById('origin').value;
destination = document.getElementById('destination').value;
var request = {
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
And now, I would like to replace the "origin" and "destination", by the 2 points defined in my geoJSON file, in order to create an itinerary between those two points.
Any idea ?
Thank you for your help !
One possible solution, use the Google Maps Data Layer to display your GeoJSON. The use it to retrieve the coordinates and get directions between them. The below code assumes 2 points (and uses your example with 2 points):
working fiddle
function calculate() {
var request = {
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
// global variables
var origin = null;
var destination = null;
var infowindow = new google.maps.InfoWindow();
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
function initialize() {
// Create a simple map.
features = [];
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {
lat: -28,
lng: 137.883
}
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
google.maps.event.addListener(map, 'click', function () {
infowidow.close();
});
// process the loaded GeoJSON data.
google.maps.event.addListener(map.data, 'addfeature', function (e) {
if (e.feature.getGeometry().getType() === 'Point') {
map.setCenter(e.feature.getGeometry().get());
// set the origin to the first point
if (!origin) origin = e.feature.getGeometry().get();
// set the destination to the second point
else if (!destination) {
destination = e.feature.getGeometry().get();
// calculate the directions once both origin and destination are set
calculate();
}
}
});
map.data.addGeoJson(data);
}
google.maps.event.addDomListener(window, 'load', initialize);