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.
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>
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.
I have this Javascript code on Google maps with geolocation and direction and I am using it in cordova , it gives me problems because it lacks the event Deviceready.
I tried to put it , but it was not working.
You are able to add it in the right way ?
Code:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
// default location. When geolocation tracks the client, this variable is set to that location
function initialize() {
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
directionsDisplay = new google.maps.DirectionsRenderer();
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//here there is marker
directionsDisplay.setMap(map);
map.setCenter(mylocation);
}
function updateRoute() {
calcRoute(mylocation);
}
function calcRoute(start) {
var start = mylocation;
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.WALKING,
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
mylocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//document.getElementById('start').value = ;
if (map) {
calcRoute(position.coords.latitude +','+ position.coords.longitude);
map.setCenter(mylocation);
//*Posizione Utente*//
var image = 'user.png'
var marker1 = new google.maps.Marker({
position: mylocation,
map: map,
title: 'ciao!',
icon: image
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
var infowindow1 = new google.maps.InfoWindow({
content: '<img src="user.png">Sono Qui.....'
});
}
})
}
google.maps.event.addDomListener(window, 'load', initialize);
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