Directions API integration to a webpage

Step 1. Add the Directions API to your webpage

<link rel="stylesheet" href="https://unpkg.com/@geoapify/route-directions@^1/styles/styles.min.css" />
<script src="https://unpkg.com/@geoapify/route-directions@^1/dist/index.min.js"></script>

Step 2. Create a RouteDirections object

HTML

<div id="route-directions"></div>

JavaScript

const routeDirections = new directions.RouteDirections(document.getElementById("route-directions"), apiKey, {
  supportedModes: ['walk', 'hike', 'scooter', 'motorcycle', 'drive', 'light_truck', 'medium_truck', 'truck', 'bicycle', 'mountain_bike', 'road_bike', 'bus'],
  supportedOptions: ['highways', 'tolls', 'ferries', 'units']
  }, {
  placeholder: "Enter an address here or click on the map"
});         
      

Step 3. Add event listeners to draw waypoints and route on a map, display instructions

routeDirections.on('waypointChanged', (waypoint, reason) => {
  updateMarkers();
});

routeDirections.on('routeCalculated', (geojson) => {
  visualizeRoute(geojson);
  generateInstructions(geojson);
});
      

Depending on which map library you use, you may have to implement the function slightly differently.

Check out the source code for this page (STRG + U in Chrome, Firefox, Internet Explorer, Option + Command + U in Safari, Chrome on Mac), which uses Leaflet and the Geoapify Directions API to retrieve directions.