Javascript API

API Overview

API Overview

 

The HERE Maps API for JavaScript is a set of programming interfaces that enable developers to build Web applications with feature rich, interactive HERE Maps at their center. The API consists of libraries of classes and methods with which to implement the functionality of an interactive application.

Click here for a detailed look at features and technical specification.

HERE Maps API for JavaScript includes APIs to cover functionality in 5 core components - 

Maps:

The Maps API offers a canvas on which to create an application with a map at its core. The Maps library, which is a part of the API dedicated to maps and mapping, is available both for browsers that support HTML5 and for older browsers. It takes advantage of the latest technologies to ensure fast map rendering and high responsiveness to the user in every capable environment. Read more..

Places: 

The Places library allows you, as a developer, to enrich Web sites by providing a sophisticated search facility for users and a customizable means to display the results that include such information as place name, address, contact details, location map, rating, reviews, as well as related premium content. The library includes:

UI library – a set of user interface widgets with methods that support place data search, retrieval and display

Data library – a set of programming interfaces that support searches for place data and data retrieval, but are not associated with a user interface

The resources available to developers using the Places library include style sheets (CSS) that can be easily attached to a Web page. As a developer, you are free to customize the existing templates or to use your own. Read more..

Positioning:

The routing service calculates and renders a travel route between two or more points. Positioning allows you to make use within your application of the positioning information available to the application user's browser.

Each service is represented by an object that takes care of its related network requests. Therefore, as a developer, you need only to create each service object (as required), providing the appropriate initialization parameters. Read more..

Routing:

Route planning and navigation are the most commonly used applications of location-based services. With the Maps API, you can calculate optimal routes that match your own calculation criteria, are based on up-to-date map data, and take into account real-time traffic information.

The API offers global coverage of streets and highways, allowing you to create routes reflecting customizable modes such as fastest, shortest, avoiding toll roads or ferries, etc. There is also support for utilizing historical speed patterns as an optimization for routes depending on the time of day. Read more..

Traffic:

Millions of sensors in major metropolitan areas around the world monitor traffic flows, providing smart flow data and graphs that are accessible via the Maps API. In addition, the API has the capability to produce routes that take into account real-time traffic data. Time-based routing can be optimized, using historical speed patterns, which allows users to save time and fuel. Read more..

Get started, add a map to your web application in 5 easy steps

  1. Add the doctype declarations and HTML header

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml">  
<head>
     <title>My first HERE Maps web page</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=7" ; IE=EmulateIE9/>
</head>

     

  2. Add the <body> section, which will contain all the elements visible on the web page, and include in it a <div> element as a container of our map. Note: Maps require proper DIV attributes for width and height, a default setting of "auto" would cause the map not to become visible. 

    <body>
    <h1>My first HERE Map!</h1>
    <div id="map" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>
</body>

     

  3. Add reference to HERE Maps API. This file is hosted on HERE service servers and will be loaded with a <script> element inside the <head> section of the page. Tip: Confirm the required URL in the HERE Maps API documentation so that you are accessing the latest version of the API.

    <script type="text/javascript" src="http://api.maps.nokia.com/2.2.4/jsl.js?with=all" charset="utf-8"></script>

     

  4. Set your application Identifier (App Id) and Application token in a <script> to initialize and authenticate your application's Map API request. 

    <script type="text/javascript">
    nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
    nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");

    To get your App Id and App token, register yourself as Maps API developer, and create a new application. 

  5. Execute the Maps API for JavaScript to display maps on this app and close the <script>. This example will display a map without any options specified, which means the map center will be located at the origin 0,0 over the Gulf of Guinea and that the zoom level defaults to a value of zero (0).

        var map = new
    nokia.maps.map.Display(document.getElementById("map"));
</script>

    You can see more comments on this code and similar examples at - Community site. 

Javascript API

Documentation for the Maps API for Javascript.

Quicklinks: