Switch from Google to HERE JavaScript Map

Last Updated: November 18, 2022

Introduction

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

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

Display an interactive vector map in your new or existing web application in which you can overlay map objects like 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. 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 display

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

HERE Maps display

In order to switch to HERE, we can keep the same HTML and CSS skeleton. The items we’ll need to change are:

import the HERE JavaScript source files
specify the application’s API Key in order to properly authenticate to the HERE platform
initialize the HERE map with a few lines of JavaScript

Modify the existing code to look like the following:

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

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

Introduction

Why switch to the HERE Maps JavaScript API?

Acquire credentials

Google Maps display

HERE Maps display

Developer