Get Started

This section outlines how to quickly get started using the HERE Maps API for JavaScript on the HERE platform.

Get a HERE account
Create a project
Get an API key
Creating a sample application
Next steps

Note

This section provides information on the minimum setup required to quickly begin using the HERE Maps API for JavaScript. For more detailed information on HERE account setup, project creation, service linking, app registration, and authentication, see the Identity & Access Management Guide.

Get a HERE account

If your organization has signed up for HERE Workspace or HERE Marketplace, contact your organization admin who can invite you to join the HERE platform organization established for your company. You can also request a free trial of the HERE platform if your company does not have an organization established for it. For more information, see the HERE platform pricing.

Create a project

To create a project, follow these steps:

Sign in to the HERE platform using your HERE account.
Open the Projects Manager from the launcher.
Click Create new project.
Enter a name for the project. Project names don't have to be unique.
Enter a project ID. Project IDs must be unique within an organization and cannot be changed for the lifetime of the organization. Project IDs must be between 4 and 16 characters in length.
Optional: Enter a description.
Click Save.
On the Resources tab, select Services and then click Link a Service.
Search for the HERE Vector Tile API service to render the map and any other service you want to use and click Link.
Click Done.

Get an API key

In this guide, you will create a simple HTML page that displays a default map and is based on HERE Maps API for Javascript. First you need to obtain an API key from the HERE platform.

The HERE Maps API for JavaScript exposes a number of services. These services need to be linked to your project for the API to work with those services. The list of services available include:

HERE Geofencing
HERE Isoline Routing
HERE Map Attributes
HERE Routing
HERE Routing - Transit
HERE Transit - Next Departures
HERE Transit - Station Search
HERE Vector Tile
HERE Search - Autosuggest
HERE Search - Browse
HERE Search - Discover
HERE Search - Forward Geocoder
HERE Search - Places ID Lookup
HERE Search - Reverse Geocoder

To get an API key, follow these steps:

Sign in to the HERE platform using your HERE account.
Select Access Manager from the launcher.
Select the Apps tab and click Register new app.
Enter a name for the app.
Optional: Enter a description for the app.
Optional: Link the app to a project by selecting one from the Default access to a project menu. See Create a project section to learn how to create one.
Click Register. The HERE platform creates a new app with a unique app ID.
On the Credentials tab, select API Keys and then click Create API key to generate a maximum of two API Keys for your application authentication credentials. The API key is created and displayed.

Creating a sample application

The use case is to create an application that displays a default map, which is non-interactive.

Its implementation uses JavaScript code to display the map in an HTML page and consists of the following steps:

The first step for any application based on the HERE Maps API for JavaScript is to load the necessary code libraries or modules. The implementation of our basic use case requires two modules: core and service (see also HERE Maps API for JavaScript Modules).

To load the modules, add the following <script> elements to the <head> of the HTML document:

<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
  type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
  type="text/javascript" charset="utf-8"></script>

The URL in the "src" attribute contains a version number that reflects the latest major release of the API. Note that this version number changes with each new release, which may break backwards-compatibility – for more information, see API versions.

To ensure optimum performance on mobile devices, add the following meta-tag to the <head> section of the HTML page:

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

Here is the complete <head> element that loads the core and service modules and ensures optimum performance on mobile devices.

<!DOCTYPE html>
  <html>
    <head>
      ...
      <meta name="viewport" content="initial-scale=1.0,
        width=device-width" />
      <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
        type="text/javascript" charset="utf-8"></script>
      <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
        type="text/javascript" charset="utf-8"></script>
      ...
    </head>
    <body>
      <div style="width: 640px; height: 480px" id="mapContainer"></div>

An essential part of creating a working application with the HERE Maps API for JavaScript is to establish communication with the back-end services provided by HERE REST APIs. In our scenario, the back-end services process requests for the map data and delivers it to the application for display.

For this purpose, initialize a Platform object with the API key you received on registration:

var platform = new H.service.Platform({
  'apikey': '{YOUR_API_KEY}'
});

Furthermore, the object provides methods that allow for easy creation of fully working service stubs, such as map tile service stubs, routing service stubs, and so on.

Continuing with this scenario, the application will display a non-interactive map centered on a predefined location at a fixed zoom level. To implement this effect:

Create an HTML container element in which the map can be rendered (for example, a div).
Instantiate an H.Map object, specifying:
- the map container element
- the map type to use
- the zoom level at which to display the map
- the geographic coordinates of the point on which to center the map

The implemenation JavaScript code shown below sets up a Map object, specifying the normal map type, zoom level 10, and the map center as a location near Berlin, Germany, given by latitude 52.5 and longitude 13.4:

// Obtain the default map types from the platform object:
var defaultLayers = platform.createDefaultLayers();

// Instantiate (and display) a map object:
var map = new H.Map(
    document.getElementById('mapContainer'),
    defaultLayers.vector.normal.map,
    {
      zoom: 10,
      center: { lat: 52.5, lng: 13.4 }
    });

The implementation displays the following map image:

The following section shows the solution including the complete HTML code of the page.

Complete HTML example page

Below, you can find the complete source code that implements the basic scenario:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
    type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
    type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div style="width: 640px; height: 480px" id="mapContainer"></div>
    <script>
      // Initialize the platform object
      var platform = new H.service.Platform({
        'apikey': 'YOUR_API_KEY'
      });

      // Obtain the default map types from the platform object
      var maptypes = platform.createDefaultLayers();

      // Instantiate (and display) the map
      var map = new H.Map(
        document.getElementById('mapContainer'),
        maptypes.vector.normal.map,
        {
          zoom: 10,
          center: { lng: 13.4, lat: 52.51 }
        });
    </script>
  </body>
</html>

Next steps

For a full list of available examples, see the Tutorials section of this dev guide.
To see how to best configure the HERE Maps API for JavaScript to work best with Japan data, see Japan.
To see how to bundle the HERE Maps API for JavaScript with the most common bundlers, see Bundling.
For the terms and conditions covering this documentation, see the HERE Documentation License.

Get started