Switch from Google to HERE Maps API for JavaScript routing

This tutorial describes the steps to switch a simple routing display from Google Maps JavaScript API directions to the HERE Maps API for JavaScript.

This tutorial will convert your code from Google Maps JavaScript API to HERE Maps JavaScript API to allow you to:

Construct a request and receive a response from HERE Routing API (navigation directions from point A to B) using the JavaScript interface.
Add a polyline route's shape on the map.

Why switch to the HERE Maps JavaScript API?

The HERE Location Platform has several advantages over Google:

Affordable and simple pricing. HERE offers limitless daily transactions for free regardless of which type of service you are using. No complicated pricing charts.
3D camera options and object rendering. Develop visually appealing location applications with enhanced 3D views.

Acquire credentials

If you don't have a HERE account, see HERE Platform account for more information.

Once you have registered for a HERE account, acquire your API Key.

Google Maps routing

The following code shows a Google Maps JavaScript API with map display and routing setup:

<html>
   <head>
      <title>Simple Google Map</title>
      <style>
         html, body { border: 0; margin: 0; padding: 0; }
         #map { height: 100vh; width: 100vw; }
      </style>
   </head>
   <body>
      <div id="map"></div>
      <script>
         var map;
         function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
               center: { lat: 37.773972, lng: -122.431297 },
               zoom: 13
            });

            //Begin Routing
            const directionsService = new google.maps.DirectionsService();
            const directionsRenderer = new google.maps.DirectionsRenderer();
            directionsRenderer.setMap(map);
            const request = {
               origin: new google.maps.LatLng(37.80221, -122.4191),
               destination: new google.maps.LatLng(37.76839, -122.51089),
               travelMode: 'DRIVING'
            };
            directionsService.route(request, response => {
               directionsRenderer.setDirections(response);
            });
         }
      </script>
      <script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE-API-KEY&callback=initMap" async defer></script>
   </body>
</html>

HERE Maps routing

Edit the existing code as follows. The code makes a request to the HERE Routing API and displays a single polyline on the map with the response coordinates.

<html>
<head>
   <title>Simple HERE Map</title>
   <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.2/mapsjs-ui.css" />
   <script src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
   <script src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
   <script src="https://js.api.here.com/v3/3.2/mapsjs-ui.js"></script>
   <script src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
   <style>
      html, body { border: 0; margin: 0; padding: 0; }
      #map { height: 100vh; width: 100vw; }
   </style>
</head>
<body>
   <div id="map"></div>
   <script>
      const platform = new H.service.Platform({ apikey: 'HERE-API-KEY' });
      const defaultLayers = platform.createDefaultLayers();
      const map = new H.Map(document.getElementById('map'),
         defaultLayers.vector.normal.map, {
         center: { lat: 37.773972, lng: -122.431297 },
         zoom: 13,
         pixelRatio: window.devicePixelRatio || 1
      });
      window.addEventListener('resize', () => map.getViewPort().resize());
      const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
      const ui = H.ui.UI.createDefault(map, defaultLayers);

      //Begin routing
      //Configure transportation mode, start, end points
      const request = {
         routingMode: 'fast',
         transportMode: 'car',
         origin: '37.80221,-122.4191',
         destination: '37.76839,-122.51089',
         return: 'polyline'
      };
      //Initialize routing service
      const router = platform.getRoutingService();
      router.calculateRoute(request, response => {
         //Parse the route's shape
         const sections = response.routes[0].sections;
         const lineString = H.geo.LineString.fromFlexiblePolyline(sections[0].polyline);
         //Create a polyline with the shape
         const routeLine = new H.map.Polyline(lineString, {
            style: { strokeColor: 'blue', lineWidth: 3 }
         });
         //Add route to map
         map.addObject(routeLine);
         //Zoom to bounds of the route shape
         map.getViewModel().setLookAtData({ bounds: routeLine.getBoundingBox() });
      });
   </script>
</body>
</html>

📘
Note
Substitute your API key for HERE-API-KEY.

For more information about routing with the HERE Maps JavaScript API, see this guide.