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.

results matching ""

    No results matching ""