When attempting to draw a route, the code runs fine but does not render.
Here's a sample code that follows the same structure and behaves the same way:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var routeDisplay = new function() {
var self = this;
// Variables
self.directionsService;
self.directionsRenderer;
self.map;
self.origin;
self.destination;
// Functions
self.setup = function() {
self.directionsService = new google.maps.DirectionsService();
self.directionsRenderer = new google.maps.DirectionsRenderer({
preserveViewport: true,
suppressMarkers: true
});
}
self.setMap = function(map) {
self.map = map;
self.directionsRenderer.map = map;
}
self.setPoints = function(origin, destination) {
self.origin = origin;
self.destination = destination;
}
self.render = function() {
if (self.directionsRenderer.map == null) self.directionsRenderer.map = self.map;
self.directionsService.route({
origin: self.origin,
destination: self.destination,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
self.directionsRenderer.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
self.hide = function() {
self.directionsRenderer.map = null;
}
self.show = function() {
self.directionsRenderer.map = self.map;
}
self.toggleShow = function() {
self.directionsRenderer.map = (self.directionsRenderer.map == null) ?
self.map : null;
}
self.isAlreadyRendered = function(origin, destination) {
if (origin == self.origin && destination == self.destination) return true;
return false;
}
}
function initMap() {
var myLatLng = {
lat: 45.5325016,
lng: -122.7973512
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var start = new google.maps.Marker({
position: myLatLng,
map: map,
label: 'start'
});
var end = new google.maps.Marker({
position: {
lat: myLatLng.lat - .5,
lng: myLatLng.lng - .5
},
map: map,
label: 'end'
});
// Set up routeDisplay
routeDisplay.setup();
routeDisplay.setMap(map);
start.addListener('click', function() {
var a = start.position;
var b = end.position;
if (routeDisplay.isAlreadyRendered(a, b)) routeDisplay.toggleShow();
else {
routeDisplay.setPoints(a, b);
routeDisplay.render();
}
});
}
</script>
<script async defer src=";callback=initMap">
</script>
</body>
</html>
Calling directionsRenderer.setDirections(response) should render the route, as the Google Maps API documentation states:
Call setDirections() on the renderer, passing it the DirectionsResult as noted above. Because the renderer is an MVCObject, it will automatically detect any changes to its properties and update the map when its associated directions have changed.
This exact strategy works fine normally, but in this situation, my self.render function is a function inside of an object I use to handle all route rendering.
One should also note that I have confirmed that the map the directionsRenderer is using is the correct map and directionRenderer.directions does change (as it should).
What could be stopping the route polyline from being rendered?
When attempting to draw a route, the code runs fine but does not render.
Here's a sample code that follows the same structure and behaves the same way:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var routeDisplay = new function() {
var self = this;
// Variables
self.directionsService;
self.directionsRenderer;
self.map;
self.origin;
self.destination;
// Functions
self.setup = function() {
self.directionsService = new google.maps.DirectionsService();
self.directionsRenderer = new google.maps.DirectionsRenderer({
preserveViewport: true,
suppressMarkers: true
});
}
self.setMap = function(map) {
self.map = map;
self.directionsRenderer.map = map;
}
self.setPoints = function(origin, destination) {
self.origin = origin;
self.destination = destination;
}
self.render = function() {
if (self.directionsRenderer.map == null) self.directionsRenderer.map = self.map;
self.directionsService.route({
origin: self.origin,
destination: self.destination,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
self.directionsRenderer.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
self.hide = function() {
self.directionsRenderer.map = null;
}
self.show = function() {
self.directionsRenderer.map = self.map;
}
self.toggleShow = function() {
self.directionsRenderer.map = (self.directionsRenderer.map == null) ?
self.map : null;
}
self.isAlreadyRendered = function(origin, destination) {
if (origin == self.origin && destination == self.destination) return true;
return false;
}
}
function initMap() {
var myLatLng = {
lat: 45.5325016,
lng: -122.7973512
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var start = new google.maps.Marker({
position: myLatLng,
map: map,
label: 'start'
});
var end = new google.maps.Marker({
position: {
lat: myLatLng.lat - .5,
lng: myLatLng.lng - .5
},
map: map,
label: 'end'
});
// Set up routeDisplay
routeDisplay.setup();
routeDisplay.setMap(map);
start.addListener('click', function() {
var a = start.position;
var b = end.position;
if (routeDisplay.isAlreadyRendered(a, b)) routeDisplay.toggleShow();
else {
routeDisplay.setPoints(a, b);
routeDisplay.render();
}
});
}
</script>
<script async defer src="https://maps.googleapis./maps/api/js?key=MY_API_KEY&callback=initMap">
</script>
</body>
</html>
Calling directionsRenderer.setDirections(response) should render the route, as the Google Maps API documentation states:
Call setDirections() on the renderer, passing it the DirectionsResult as noted above. Because the renderer is an MVCObject, it will automatically detect any changes to its properties and update the map when its associated directions have changed.
This exact strategy works fine normally, but in this situation, my self.render function is a function inside of an object I use to handle all route rendering.
One should also note that I have confirmed that the map the directionsRenderer is using is the correct map and directionRenderer.directions does change (as it should).
What could be stopping the route polyline from being rendered?
Share Improve this question edited Jul 17, 2018 at 19:09 Brendan McDonnell asked Jul 17, 2018 at 16:58 Brendan McDonnellBrendan McDonnell 952 silver badges7 bronze badges 01 Answer
Reset to default 3To set the map attribute of the DirectionsRenderer, use the .setMap method. You are currently setting the map property of the DirectionsRenderer, which is not documented.
var routeDisplay = new function() {
var self = this;
// Variables
self.directionsService;
self.directionsRenderer;
self.map;
self.origin;
self.destination;
// Functions
self.setup = function() {
self.directionsService = new google.maps.DirectionsService();
self.directionsRenderer = new google.maps.DirectionsRenderer({
preserveViewport: true,
suppressMarkers: true
});
}
self.setMap = function(map) {
self.map = map;
self.directionsRenderer.setMap(map);
}
self.setPoints = function(origin, destination) {
self.origin = origin;
self.destination = destination;
}
self.render = function() {
if (self.directionsRenderer.getMap() == null)
self.directionsRenderer.setMap(self.map);
self.directionsService.route({
origin: self.origin,
destination: self.destination,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
self.directionsRenderer.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
self.hide = function() {
self.directionsRenderer.setMap(null);
}
self.show = function() {
self.directionsRenderer.setMap(self.map);
}
self.toggleShow = function() {
self.directionsRenderer.map = (self.directionsRenderer.getMap() == null) ?
self.map : null;
}
self.isAlreadyRendered = function(origin, destination) {
if (origin == self.origin && destination == self.destination) return true;
return false;
}
}
proof of concept fiddle
code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<div id="map"></div>
<script>
var routeDisplay = new function() {
var self = this;
// Variables
self.directionsService;
self.directionsRenderer;
self.map;
self.origin;
self.destination;
// Functions
self.setup = function() {
self.directionsService = new google.maps.DirectionsService();
self.directionsRenderer = new google.maps.DirectionsRenderer({
preserveViewport: true,
suppressMarkers: true
});
}
self.setMap = function(map) {
self.map = map;
self.directionsRenderer.setMap(map);
}
self.setPoints = function(origin, destination) {
self.origin = origin;
self.destination = destination;
}
self.render = function() {
if (self.directionsRenderer.getMap() == null)
self.directionsRenderer.setMap(self.map);
self.directionsService.route({
origin: self.origin,
destination: self.destination,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
self.directionsRenderer.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
self.hide = function() {
self.directionsRenderer.setMap(null);
}
self.show = function() {
self.directionsRenderer.setMap(self.map);
}
self.toggleShow = function() {
self.directionsRenderer.map = (self.directionsRenderer.getMap() == null) ?
self.map : null;
}
self.isAlreadyRendered = function(origin, destination) {
if (origin == self.origin && destination == self.destination) return true;
return false;
}
}
function initMap() {
var myLatLng = {
lat: 45.5325016,
lng: -122.7973512
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var start = new google.maps.Marker({
position: myLatLng,
map: map,
label: 'start'
});
var end = new google.maps.Marker({
position: {
lat: myLatLng.lat - .5,
lng: myLatLng.lng - .5
},
map: map,
label: 'end'
});
// Set up routeDisplay
routeDisplay.setup();
routeDisplay.setMap(map);
start.addListener('click', function() {
var a = start.position;
var b = end.position;
if (routeDisplay.isAlreadyRendered(a, b)) routeDisplay.toggleShow();
else {
routeDisplay.setPoints(a, b);
routeDisplay.render();
}
});
}
</script>
<script async defer src="https://maps.googleapis./maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>