1. Home >
  2. Documentation >
  3. Services >
  4. directionsrenderer
 

directionsrenderer

This function will display a route on the map and send text-based directions to a given div using the function google.maps.DirectionsRenderer when given an address. This function renders the directions using Google's DirectionsResult object styling when retrieved from the DirectionsService.

Usage

Adding the direction renderer, it is possible to display the directions in a div setting using either the divId property or the container one.

Parameters

  • divId {string} Id of the targetted div to render the directions (optional)
  • container {string|node|jQuery} css selector of div node of the targetted div to display the directions (optional)
  • options {google.maps.DirectionsRendererOptions}

Example

This example will display a route on the map from a given address and adds the directions into a given div.

$("#test").gmap3({ 
  getroute:{
    options:{
        origin:"48 Pirrama Road, Pyrmont NSW",
        destination:"Bondi Beach, NSW",
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    },
    callback: function(results){
      if (!results) return;
      $(this).gmap3({
        map:{
          options:{
            zoom: 13,  
            center: [-33.879, 151.235]
          }
        },
        directionsrenderer:{
          container: $(document.createElement("div")).addClass("googlemap").insertAfter($("#test")),
          options:{
            directions:results
          } 
        }
      });
    }
  }
});
Close