With the code below, I display a journey betwen two points.
Now I try to use direction result object and direction leg to get information like steps, legs or distance in a variable, but I have no idea to how use this method...
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(44.912198, -0.605530);
var oceanBeach = new google.maps.LatLng(44.893356, -0.739138);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
center: haight
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
calcRoute()
}
calcRoute()
function calcRoute() {
var request = {
origin: haight,
destination: oceanBeach,
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks
I've resolved a part of the problem with this code :
Variable duration, path, and polyline1 are ok, I've tried it with an alert.
Now I want to save those variables in a data base like sql, how I do ? using php ?
function calcRoute() {
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var warnings = document.getElementById('warnings_panel');
warnings.innerHTML = '<b>' + response.routes[0].warnings + '</b>';
directionsDisplay.setDirections(response);
showSteps(response);
}
});
}
function showSteps(directionResult) {
var myRoute = directionResult.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
var duration = myRoute.steps[i].duration.text;
var path = myRoute.steps[i].path;
var polyline1 = myRoute.steps[i].distance.text;
}
}
Related
I am trying to display multiple directions in a single map. In the code below I've tried to declare two of them but Google display one single path that include all points. How can I separate them? Also, can I set a different colour for each direction?
PS: I've searched StackOverflow but I've found solutions only for older API versions.
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map;
var mapCenter = new google.maps.LatLng(46.499729, 26.647089);
var mapOrigin1 = new google.maps.LatLng(46.596652, 26.812765);
var mapDestination1 = new google.maps.LatLng(46.4674824,26.4513263);
var mapOrigin2 = new google.maps.LatLng(46.5476592,26.515106);
var mapDestination2 = new google.maps.LatLng(46.4444641,27.362008);
var mapOptions = {
zoom: 14,
center: mapCenter
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
function calculateRoute(mapOrigin, mapDestination) {
var request = {
origin: mapOrigin,
destination: mapDestination,
travelMode: 'DRIVING'
};
directionsService.route(request, function(result, status) {
if (status == "OK") {
directionsDisplay.setDirections(result);
}
});
}
calculateRoute(mapOrigin1, mapDestination1);
calculateRoute(mapOrigin2, mapDestination2);
}
</script>
To display multiple routes on the map, you need multiple DirectionRenderer objects.
related question: Google Maps API : multiple direction/route on same map
Simplest fix, create a new DirectionsRendererobject each time you call the calculateRoute function (if you need to change the routes or hide them later, you will need to keep references to these `DirectionRenderer1 objects).
function calculateRoute(mapOrigin, mapDestination) {
var request = {
origin: mapOrigin,
destination: mapDestination,
travelMode: 'DRIVING'
};
directionsService.route(request, function(result, status) {
if (status == "OK") {
var directionsDisplay = new google.maps.DirectionsRenderer({map:map});
directionsDisplay.setDirections(result);
}
});
}
proof of concept fiddle
code snippet:
function initMap() {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map;
var mapCenter = new google.maps.LatLng(46.499729, 26.647089);
var mapOrigin1 = new google.maps.LatLng(46.596652, 26.812765);
var mapDestination1 = new google.maps.LatLng(46.4674824, 26.4513263);
var mapOrigin2 = new google.maps.LatLng(46.5476592, 26.515106);
var mapDestination2 = new google.maps.LatLng(46.4444641, 27.362008);
var mapOptions = {
zoom: 14,
center: mapCenter
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
function calculateRoute(mapOrigin, mapDestination) {
var request = {
origin: mapOrigin,
destination: mapDestination,
travelMode: 'DRIVING'
};
directionsService.route(request, function(result, status) {
if (status == "OK") {
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map
});
directionsDisplay.setDirections(result);
}
});
}
calculateRoute(mapOrigin1, mapDestination1);
calculateRoute(mapOrigin2, mapDestination2);
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
Use separate DirectionsRenderer objects (one for each route).
function initMap() {
var directionsService = new google.maps.DirectionsService();
var map;
var mapCenter = new google.maps.LatLng(46.499729, 26.647089);
var mapOrigin1 = new google.maps.LatLng(46.596652, 26.812765);
var mapDestination1 = new google.maps.LatLng(46.4674824, 26.4513263);
var mapOrigin2 = new google.maps.LatLng(46.5476592, 26.515106);
var mapDestination2 = new google.maps.LatLng(46.4444641, 27.362008);
var mapOptions = {
zoom: 14,
center: mapCenter
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
function calculateRoute(mapOrigin, mapDestination) {
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map
});
var request = {
origin: mapOrigin,
destination: mapDestination,
travelMode: 'DRIVING'
};
directionsService.route(request, function(result, status) {
if (status == "OK") {
directionsDisplay.setDirections(result);
}
});
}
calculateRoute(mapOrigin1, mapDestination1);
calculateRoute(mapOrigin2, mapDestination2);
}
#map-canvas {
height: 180px;
}
<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
Hi is it possible to get the direction from googlemaps without showing a map?
I can get the directions from calling like this:-
https://maps.googleapis.com/maps/api/directions/json?origin=52.4076963,-1.4853391999999985&destination=52.6114729,-1.6812878000000637&key=KEYHERE
<div id="result"></div>
And the code I am trying to call it with is :
function calcRoute() {
var start = "52.4076963,-1.4853391999999985";
var end = "52.6114729,-1.6812878000000637";
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var result = document.getElementById('result');
result.innerHTML= "";
for (var i =0; i < response.routes[0].legs[0].steps.length; i++){
result.innerHTML+=response.routes[0].legs[0].steps[i].instructions+"<br>"
}
console.log(response)
directionsDisplay.setDirections(response);
}
});
}
calcRoute();
How I get this to run with calcRoute and just show the direction in the div?
Thanks
To display the directions text without a map using the Google Maps Javascript API v3:
don't set the map property of the DirectionsRenderer
set the panel property of the DirectionsRenderer
function calcRoute() {
var directionsService = new google.maps.DirectionsService();
var start = "52.4076963,-1.4853391999999985";
var end = "52.6114729,-1.6812878000000637";
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setPanel(document.getElementById('result'));
directionsDisplay.setDirections(response);
}
});
}
proof of concept fiddle
function initialize() {
function calcRoute() {
var directionsService = new google.maps.DirectionsService();
var start = "52.4076963,-1.4853391999999985";
var end = "52.6114729,-1.6812878000000637";
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setPanel(document.getElementById('result'));
directionsDisplay.setDirections(response);
}
});
}
calcRoute();
}
google.maps.event.addDomListener(window, "load", initialize);
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="result"></div>
The solution to a lot of "how to use the maps API without showing a map?" questions assumes that it's going to be ok to use setPanel and for a journey plan to appear on your page instead of a map.
In case anyone wondered, if you don't want this and just want to extract data from the API without any google html being injected into your page at all you still need to use setPanel, but parse a null to it.
directionsDisplay.setPanel(null);
The below code shows two points in the map and draws the driving path between those points. What I'm trying to achieve is when I move a point, it should move the marker and re-draw the path. How can I do that? I appreciate any hints. Thanks.
function mapLocation() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var istanbul = new google.maps.LatLng(41.015137, 28.979530);
var mapOptions = {
zoom: 7,
center: istanbul
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = new google.maps.LatLng(41.01524, 28.975994);
//var end = new google.maps.LatLng(38.334818, -181.884886);
var end = new google.maps.LatLng(41.013232, 28.978676);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
} else {
alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
mapLocation();
You can set the draggable option of the DirectionsRendererOptions to true and pass it to the DirectionsRenderer to allow users to edit the rendered route(s).
directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true
});
See the documentation.
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var something;
var locations = <?php echo json_encode($googlemaparray);?>;
var uniquelocations= <?php echo json_encode($uniquegoogle);?>;
var barinfo = <?php echo json_encode($barinfoarray);?>;
var marker, i;
var total = uniquelocations.length;
var test;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 17,
center: new google.maps.LatLng(locations[0],locations[1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var start = new google.maps.LatLng(uniquelocations[0],uniquelocations[1]);
var end = new google.maps.LatLng(uniquelocations[0],uniquelocations[1]);
var waypts = [];
for (var i = 2; i < uniquelocations.length; i+=2){
waypts.push({
location:new google.maps.LatLng(uniquelocations[i],uniquelocations[i+1])});
};
var request = {
origin: start,
destination: end,
waypoints:waypts,
optimizeWaypoints:true,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var something=response.routes.waypoint_order;
console.log(something);
}
});
// test = google.maps.geometry.spherical.computeDistanceBetween({
// from:new google.maps.LatLng(uniquelocations[0],uniquelocations[1]),
// to:new google.maps.LatLng(uniquelocations[2],uniquelocations[3])
// });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
How do I gain access to the array from waypoint_order, because I need to know how my waypoints are being ordered. When I console.log(something) for the existing code, it says "undefined" in the console. I am using a WAMP stack to test this code out.
Thanks for the help.
The waypoints order is response.routes[0].waypoint_order (where 0 is the first route if more than one are returned).
i had some trouvle with invoking a javascript function with more than one argument from a html page that is what i am doing :
wbNavigator.Navigate(new Uri("http://localhost:56433/route.html" ,UriKind.Absolute) );
object results= wbNavigator.InvokeScript("calculer", new string[] {"3.072526", "36.766942", "3.042526", "36.766942"});
but when invoking nothing's hapening .Am i missing something ?
that is my javascript Code :
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
function calcluer(lon_A, lat_A, lon_B, lat_B) {
var map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
var salle2 = new google.maps.LatLng(lat_A, lon_A);
var salle3 = new google.maps.LatLng(lat_B, lon_B);
var request = {
origin: salle2,
destination: salle3,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
// Display the distance:
document.getElementById('distance').innerHTML +=
response.routes[0].legs[0].distance.value + " meters";
// Display the duration:
document.getElementById('duration').innerHTML +=
response.routes[0].legs[0].duration.value + " seconds";
directionsDisplay.setDirections(response);
}
});
}
</script>
Just use:-
object results= wbNavigator.InvokeScript("calculer", "3.072526", "36.766942", "3.042526", "36.766942");
Note that doing this immediately after navigate may not have the desired effect. You should perhaps move this code to the LoadCompleted event of the WebBrowser.