Switch from Google to HERE JavaScript Map Routing

Last Updated: December 06, 2022

Introduction

This tutorial lays out the steps for easily switching a simple routing display from the Google Maps JavaScript API directions to the HERE Maps JavaScript API.

By the end of this tutorial, you will have successfully converted your code from Google to HERE in order to:

Construct a request and receive a response from the 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 benefits over Google:

affordable and simple pricing. HERE offers up to 250K monthly transactions for free regardless of which type of service you are using. Say goodbye to complicated pricing charts.
3D camera options and object rendering. Develop visualy appealing location applications with enhanced 3D views.
Advanced enterprise use cases like toll cost calculation and truck routing.

Acquire credentials

The first step to switching to HERE JavaScript is acquiring an API Key from the Projects tab in the developer portal. If you don’t yet have a HERE account, please register here.

No credit card is required.

Once you have registered for a HERE account, please grab your API Key under the section JavaScript in the Projects page.

Google Maps routing

A simple Google Maps JavaScript API with map display and routing setup will look like:

<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

Modify the existing code to look like the following. The code will make a request to the HERE Routing API and display a marker on the map with the response’s 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>

Please don’t forget to swap HERE-API-KEY with your own API Key.

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

Introduction

Why switch to the HERE Maps JavaScript API?

Acquire credentials

Google Maps routing

HERE Maps routing

Developer