Oct 272014

HERE Maps is the new trademark of the Nokia/Navteq mapping platform, after its acquisition by Microsoft. This platform is an alternative to Google Maps worth to be taken into account, offering a similar functionality and (alleguedly) better performance.

This post explains how to use the HERE Maps API to insert a map in a web page.

1. Obtaining credentials to access the HERE Maps API

Requests to the HERE Maps API must have access credentials appended. To obtain these credential, we go to http://developer.here.com/get-started.

In that page, one of three types of license can be chosen:

  • Evaluation license: Gives access to all features of the API, for an evaluation period of 90 days.
  • Base license: Gives access to the base functionality, with no time limit, but with a limit of 10,000 requests/day. Can be used in commercial applications.
  • Get In Touch: An ad hoc commercial license can be negotiated by getting in touch with the commercial department.

To illustrate this post, we have requested a base license. The features available for this type of license are:


2. Loading the HERE Maps API javascript library

For the basic usage of adding a map to a web page, two modules of the library need to be loaded from the here.com server. This is done adding the following code to the <head> section of the page.

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

3. Adding  the map container element

In the <body> section of the page, add a <div> element adequately dimensioned where we want the map to be displayed:

<div id='divmap' style="width:600px; height:300px;"></div>

4. Generating the map

The map is generated with a call to the API that creates a map object, after the page has been loaded in the browser. To implement this, a “loadMap()” function is defined in a javascript section, inside the <head> section of the page:

  function loadMap() {
    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 defaultLayers = platform.createDefaultLayers();
    // Instantiate (and display) a map object:
    var map = new H.Map(
            zoom: 10,
            center: { lat: 52.5, lng: 13.4 }

Then, add an “onload” event to the <body> tag to execute the “loadMap()” function after the page loading completes:

<body onload="loadMap();" >

And here is the result:

As we can see, the map displayed is a static map. To give the user the possibility to pan, zoom or otherwise interact with the map, an event handler must be added to the map object, as explained below.

5. Event handling – making the map interactive

Events are actions that the user carries out on the map, such as clicking on it. The functionality to react to these events is implemented in a module “mapsjs-events.js” of the API.

To load the module, a <script> element is added to the <head> section of the HTML code of the page, below the other <script> elements that load the “base” and “service” modules:

<script src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js" 
        	   type="text/javascript" charset="utf-8"></script>

Then, below the javascript code that creates the map object, the sentences that enable the processing off events in the map are added:

    // Enable the event system on the map instance:
    var mapEvents = new H.mapevents.MapEvents(map);
    // Instantiate the default behavior, providing the mapEvents object: 
    var behavior = new H.mapevents.Behavior(mapEvents);

The last sentence enables the default interactivity:

  • “Click and drag” pans the map
  • A double click with the left mouse button zooms in the map
  • A double click with the right mouse button zo0ms out the map

Besides, custom event handlers can be written to replace or complement the default interactivity.

For instance, the code below writes a message to the console when a click is done on the map:

    // Add event listeners:
    map.addEventListener('tap', function(evt) {
        // Log 'tap' and 'mouse' events:
        console.log(evt.type, evt.currentPointer.type); 


Related posts

 Posted by at 3:48 pm

 Leave a Reply