×
Namespaces

Variants
Actions

HERE Maps API - Add Maps To Any Web Page

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Tested with
Devices(s): Internet Explorer, Google Chrome, Firefox, Opera
Compatibility
Platform(s): Web
Dependencies: HERE Maps 2.5.3
Article
Keywords: HERE Maps, JavaScript
Created: Maveric (20 Jun 2011)
Updated: avnee.nathani (03 Jan 2012)
Last edited: jasfox (12 Mar 2014)


Contents

Introduction

It is easy to add HERE Maps to your web page or blog. For this we only need a few lines of HTML, JavaScript and CSS. In this article we will describe a bit more than it requires to just add the map, because there are some related points that will be good to know.

The HTML file that will be created can afterwards be changed the way you want, you just need to put the required bits and pieces in their correct place in your new code to get the map working. If you want to go straight into the embedding process of the map, just skip the next chapter "About HTML versions and validation".

About HTML versions and validation

In principle, it is important to have the HTML coded the right way, otherwise you may experience oddities within the JavaScript code or your code stylesheet. JavaScript primarily expects the HTML to be coded right so it would be a good practise to validate your HTML now and then. A correctly validated HTML code also runs faster, as it is interpreted in strict mode - and if not, it will revert to so called "quirks" mode, which means it will allow increasingly for invalid HTML code. This, on the other hand, makes the page render more slowly. HTML 5 has taken the current web development world by storm. Even so, the most commonly used versions are still HTML 4.01 and XHTML 1.0, but XHTML 1.1, HTML 5 and CSS3 are becoming widely used - even HTML5 is still under draft work. All modern browsers support HTML5, and HERE Maps is also designed to be run with the most recent web browsers.

The most common way to do this is to use W3C’s HTML validator. It validates all flavors of HTML. You validate your file by entering the URL of the web page you want validated. Direct validator link: http://validator.w3.org/

Creating your first HERE Maps web page

For this most basic example of adding HERE Maps to your web page, we will start by creating a new file, and naming it index.html.

We start the coding by adding the doctype declaration:

<!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">

Note: Please note that HERE Maps API is defined as "transitional" hence definition "strict" would not work. You could also define type HTML5 - this would be reduced down much simpler with <!doctype html>.

Next we will start the <head> section, and it starts with the <title> element, which is responsible for the title text of the web page.

<head>
<title>My first HERE Maps web page</title>

The next one is the meta element specifying the character encoding which will be used - this is required information for the HTML validation.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

UTF-8 would be most recommended as it contains special characters for all languages. And it is recommended to add:

<meta http-equiv="X-UA-Compatible" content="IE=7" ; IE=EmulateIE9/>

for IE. We then close the <head> section with the element

</head>

We will start the <body> section next, it will contain all the elements visible on the web page.

The elements we will use in this example are the <h1> and <div> elements. The heading is not mandatory, but will add a little "spice".

<h1>My first Nokia Map!</h1>

We then define a <div> element. Here we give it an id of "map", so we can have it contain our map later. In any case, we would be targeting the map element through it from both the JavaScript part and the stylesheet as well.

Map div and styling

The map will be sized to the dimensions of the <div> element it is set to contain. Even though you can write the CSS within the HTML page, it would be preferable to use a separate style sheet file. In our example we will embed the CSS as we are not setting a lot of style information.

Where the CSS is capable of performing many interesting effects for the HTML page, in this example we only use a very simple set of parameters, but you can of course style your map container the way you wish. (From the CSS, if it was a separate file, you could refer to it with the #map selector). For our map we need first to set the div attributes width and height. In this example the width will be defined as "%100", meaning the map will span across the whole page horizontally. The height will be set to "%80", so that the map will leave 20% at the bottom of the page . You can of course set these values to other percentages, or amount of pixels, depending on your need.

Important note: HERE Maps will require proper values for these, so the default setting of "auto" would cause the map not to become visible. If you set the width or height to "auto" or to zero values, the map will not become visible.

About the CSS, if you would like to for example have a one pixel wide black border around the map div you could define "border: 1px solid #000;", this would work as well.

For this example, we will define the map id with the following values. It is important to use exact values because XHTML is in use. With HTML you could define these more loosely.

<div id="map" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>

Note: In case you use a separate CSS file, you need to reference to it from the HTML with <link> element within the <head> section, e.g. And you would also need to add the path to the file. The media="all" would mean that the stylesheet is to be used for all media types.

We then close the <body> section:

</body>

Referencing to the HERE Maps API

The web page code is now only missing a reference to the HERE Maps API JavaScript file. This file is hosted on Nokia service servers and will be loaded with a <script> element inside the <head> section of the page.

In general, the <script> element is designed for integrating remote scripts into a web page.

This element contains two important attributes; the type, which will be set to "text/javascript" and the "src", which should refer to the exact URL of the API. So we will define the element as follows:

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

This refers to version 2.5.3 of the API, you can check to ensure that you are using the latest version of the HERE Maps API by looking at the versioning page of developer.here.com.

Localisation

The HERE Maps API will automatically try to determine in which language to display its user interface. But if you want you can change the localization definition.

Initialisation

The HERE Maps API can now be used to create a wide range of map effects. Map initialization happens using JavaScript. Later on you would maybe want to put this code into a separate JavaScript file (.js), but for our example we will be including the JavaScript within the HTML page.

Note 1: src and type attributes of the <script> tag are correct, even though there are cases when an attribute language="JavaScript" has been used. The latter has been deprecated and should be avoided.

Note 2: Note: if you want to determine when the Map has been fully loaded, use the mapViewChanged() method.

Example code

The map loader is called in the <head> section of the page with the following line of code:

<script src="http://js.api.here.com/se/2.5.3/jsl.js" type="text/javascript" charset="utf-8"></script>

Tip.pngTip: Confirm the required URL in the HERE Maps API documentation so that you are accessing the latest version of the API.

The appID and authentication token are set in the <script> section first before anything can be done with the map:

nokia.Settings.set("app_id", "YOUR APP ID"); 
nokia.Settings.set("app_code", "YOUR TOKEN");

Note.pngNote: Nokia provides several services options within the Maps API offering. The service is free to use, but you must obtain and use authentication and authorization credentials to use the services. Please read the Pricing Plans page to decide which business model best fits your needs. Authentication requires unique Maps API credentials, namely an AppId and a token. You can obtain your own an AppId and Token for free following the instructions here.


Map div stylesheet values width and height must not be "auto" (or be changed to "auto"), otherwise the map will not be visible.

Example 1

This example will show the map without any options specified. What this means is, that 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).

<!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" />
<script type="text/javascript"
src="http://js.api.here.com/se/2.5.3/jsl.js" charset="utf-8">
</script>
</head>
<body>
<h1>My first Nokia Map!</h1>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>
<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you
// register on http://api.developer.nokia.com/
//
nokia.Settings.set("app_id", "YOUR APP ID");
nokia.Settings.set("app_code", "YOUR TOKEN")
//
/////////////////////////////////////////////////////////////////////////////////////
var map = new nokia.maps.map.Display(document.getElementById("map"));
</script>
</body>
</html>

Screenshot
FirstNokiaMap1.PNG

Tip.pngTip: The HERE Maps API is generally used to display a pannable, zoomable map on screen. If you do not need this functionality, a simpler solution for displaying a static map would be to use the RESTful Map API where the location of the map is encoded into the URL of the image. For example, the following URL will display a static map without using any JavaScript:

<!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>
</head>
<body>
<h1>My first Nokia Map!</h1>
<img id="gmapcanvas" src="http://m.nok.it/?c=0,0&w=600&z=1&nord&nodot" alt="Hello World" />
</body>
</html>

Example 2

This example will add a couple of attributes and behaviors to the map, bringing it to a higher zoom level and selecting a center point of a known position.

<!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" />
<script type="text/javascript"
src="http://js.api.here.com/se/2.5.3/jsl.js" charset="utf-8">
</script>
</head>
<body>
<h1>My first Nokia Map!</h1>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>
<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you
// register on http://api.developer.nokia.com/
//
nokia.Settings.set("app_id", "YOUR APP ID");
nokia.Settings.set("app_code", "YOUR TOKEN");
//
/////////////////////////////////////////////////////////////////////////////////////
var map = new nokia.maps.map.Display(document.getElementById("map"),
{
'components': [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar()],
'zoomLevel': 4,
'center':[19.119, 72.8957]
});
</script>
</body>
</html>

Screenshot
FirstNokiaMap2.PNG

For more on HERE Maps API

Please check out the HERE Maps API full documentation and API reference here:

You may also access the interactive API explorer

And additional examples on GitHub

This page was last modified on 12 March 2014, at 20:26.
668 page views in the last 30 days.
×