Switch from Google to HERE Maps API for JavaScript

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

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

Display an interactive vector map in your new or existing web application and overlay map objects such as markers, polygons, and popups.

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. No complicated pricing charts.
3D camera options and object rendering. Develop visualy 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 display

The following code shows a simple Google Maps JavaScript API configuration:

<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,
        });
      }
    </script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=GOOGLE-API-KEY&callback=initMap"
      async
      defer
    ></script>
  </body>
</html>

HERE Maps display

Maintain the existing HTML and CSS skeleton and perform the following tasks:

Import the HERE JavaScript source files
Add the application's API Key to authenticate to the HERE platform
Initialize the HERE map using JavaScript

Edit the existing code as follows:

<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"
    />
    <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.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>
    <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);
    </script>
  </body>
</html>

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