<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).
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>
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;
}
}
Im using below code to show a distance between two distances but zoom doesn't work it always will be in default zoom level. I tried setting lot of values but it's not working. Please help.
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var from = "";
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.preserveViewport = false;
var dallas = new google.maps.LatLng(32.8931567, -97.0402193);
var mapOptions = {
zoom: 15,
center: dallas
};
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
map.setZoom(map.getZoom()+5);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = 'dallas airport terminal a';
var end = 'SpringHill Suites';
console.log("HotelDetail: " + end);
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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
For what you want to achieve, the preserveViewport property needs to be set to true like this.
directionsDisplay = new google.maps.DirectionsRenderer({
preserveViewport: true
});
//directionsDisplay.preserveViewport = false;
In addition, your code sets a zoom level of 20 which is too high to see anything on the map. Here is a working example with an initial zoom level of 12: JSFiddle
I am unable to create custom polyline for transit directions on Google API. Only part of the route is rendered, not all. It works for driving, walking & cycling but not for transit. Not sure what exactly am I missing. If someone has faced the same issue, please help!
I have made an example in fiddle:
http://jsfiddle.net/srs/vF2e9/1/
Sample Code
var directionsDisplay, map;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.850033, -87.6500523)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = "98012";
var end = "98014";
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.TRANSIT
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var polyLine = new google.maps.Polyline({
strokeColor: '#FF0000'
});
var options = {};
options.directions = response;
options.map = map;
options.polylineOptions = polyLine;
//options.suppressMarkers = true;
directionsDisplay.setOptions(options);// = new google.maps.DirectionsRenderer(options);
polyLine.setMap(map);
//directionsDisplay.setDirections(response);
}
});
}
A polylineOptions anonymous object is not (and shouldn't be) a google.maps.Polyline.
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var polyLineOptions = {
strokeColor: '#FF0000'
};
var options = {};
options.directions = response;
options.map = map;
options.polylineOptions = polyLineOptions;
//options.suppressMarkers = true;
directionsDisplay.setOptions(options);// = new google.maps.DirectionsRenderer(options);
polyLine.setMap(map);
//directionsDisplay.setDirections(response);
}
});
updated fiddle
I've a problem with my script, I need to see the way between two points, the function directionsService.route() return the status "OK" but in the map I can't see the route!
The code:
<script type="text/javascript" >
var dirService;
var render;
function calcolateRoute(){
dirService = new google.maps.DirectionsService();
var myOrigin = new google.maps.LatLng( 46.44664,12.381245);
var myDestination = new google.maps.LatLng( 46.429516,12.373939);
var mapOptions = {
zoom:15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myOrigin
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var renderOpt = {
map:map,
origin: myOrigin,
destination: myDestination
};
render = new google.maps.DirectionsRenderer(renderOpt);
render.setMap(map);
var requestRoute = {
origin: myOrigin,
destination: myDestination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
dirService.route(requestRoute, function(result, status){
if(status == google.maps.DirectionsStatus.OK){
render.setDirection(result);
alert(status);
}else{
alert(status);
}
});
}
google.maps.event.addDomListener(window, 'load', calcolateRoute);
</script>
Thank you for all help
It's down to a typo. Try render.setDirections(result); instead.