Maps API for JavaScript Developer Guide

Quick Start

This article shows the implementation of a basic use case to demonstrate how to start using the Maps API for JavaScript.

Use Case

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:

Load the Maps API code libraries.
Initialize communication with HERE back-end services (to request map image tiles).
Initialize a map object, displaying the map.

Below, we explain these steps in detail.

Loading the API Code Libraries

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.hereapi.cn/v3/3.0/mapsjs-core.js"
  type="text/javascript" charset="utf-8"></script>
<script src="https://js.hereapi.cn/v3/3.0/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.hereapi.cn/v3/3.0/mapsjs-core.js" 
    type="text/javascript" charset="utf-8"></script>
    <script src="https://js.hereapi.cn/v3/3.0/mapsjs-service.js" 
    type="text/javascript" charset="utf-8"></script>
    ...
  </head>

Initialize Communication with Back-end Services

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 map images and deliver them to the application for display.

To make this possible, initialize a Platform object with the app_id and app_code you received on registration. For more information on authentication, see the Identity & Access Management Developer Guide:

var platform = new H.service.Platform({
  'app_id': '{YOUR_APP_ID}',
  'app_code': '{YOUR_APP_CODE}'
});

It is important to initialize a Platform object not only to effect authentication and authorization, but also to use the Customer Integration Testing instance of the HERE Platform and/or to use secure HTTP (HTTPS) when communicating with the back end. Furthermore, the object provides methods that allow for easy creation of fully working service stubs, such as map tile service stubs, routing service stubs, etc.

Initialize the Map

The application in our scenario is to display a non-interactive map centered on a predefined location at a fixed zoom level. To implement this:

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.normal.map,
  {
    zoom: 10,
    center: { lat: 52.5, lng: 13.4 }
  });

The implementation displays the following map image:

The next 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:

<html>
  <head>
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  <script src="https://js.hereapi.cn/v3/3.0/mapsjs-core.js"
  type="text/javascript" charset="utf-8"></script>
  <script src="https://js.hereapi.cn/v3/3.0/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({
    'app_id': '{YOUR_APP_ID}',
    'app_code': '{YOUR_APP_CODE}'
    });

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

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