Google Maps setting directions of directionsRenderer object not drawing route

Question

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:





  
  
  Simple markers

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?

geocodezip · Accepted Answer

To 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
}

Google Maps setting directions of directionsRenderer object not drawing route

Answers (1)

Related Questions