Switch from Google to HERE JavaScript map routing

📘
Note
The 3.1 version of this API has been deprecated. For continued support and feature development, upgrade to the latest 3.2 version.

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 visualy appealing location applications with enhanced 3D views.
Advanced enterprise use cases, such as toll cost calculation and truck routing.

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 marker 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.1/mapsjs-ui.css" />
   <style>
      html, body { border: 0; margin: 0; padding: 0; }
      #map { height: 100vh; width: 100vw; }
   </style>
</head>
<body>
   <div id="map"></div>
   <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
   <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
   <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
   <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
   <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 = {
         mode: 'fastest;car',
         waypoint0: 'geo!37.80221,-122.4191',
         waypoint1: 'geo!37.76839,-122.51089',
         representation: 'display'
      };
      //Initialize routing service
      const router = platform.getRoutingService();
      router.calculateRoute(request, response => {
         //Parse the route's shape
         const shape = response.response.route[0].shape.map(x => x.split(','));
         const linestring = new H.geo.LineString();
         shape.forEach(s => linestring.pushLatLngAlt(s[0], s[1]));
         //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.