Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Maps Examples for HERE Maps API

From Wiki
Jump to: navigation, search

Note.pngNote: Further examples can be found on the API explorer and HERE Maps on Github Pages

Since this article was first written, the Ovi Maps API has been superceded by the HERE Maps API. The latest version of the API can be found here. The original Ovi Map Examples for this article were tested on FireFox 5 only, though they should work with other supported browsers as well. All examples are also hosted live at The code examples have been converted to use the latest HERE Maps library.

For Client side implementations, Qt versions of similar use case can be found from Qt Maps Examples, and examples for Windows phone using Bing maps can be found from Maps Examples for Windows phone wiki article.


Hello Map

Basic minimal implementation of the map, includes couple of additional lines for kinetic panning etc. interactions.

see also: Basic Map

Download example: Media:JsMaps

Map events

Check for mouse events for the API (behavior control) as well as DOM events for the Map div. Also Map observers adding removing included.

see also: Map Events

Download example: Media:JsMaps

Map interaction

Shows some basic interaction functionalities with the map like zooming, tilting, rotating & moving. As well as shows changing map type.

see also: Map components

Download example: Media:JsMaps

Simple Map content

Shows some basic map content handling parts. Including Markers, polyline & polygon. Additional functionality shown are Z-Orders, changing visibility, adding & removing objects from Map as well as from a container, and also changing colors for polygon & polyline

Download example: Media:JsMaps

More Map content

Shows using Rectangle & Circle. As well as shows additional functionality, such as changing line width, object location, Circle precision etc.

see also: Adding shapes onto the map

Download example: Media:JsMaps

Map markers

Shows how to personalize markers, use Draggable marker, utilizing click events for bringing plain-text info bubble as well as using HTML in the info bubble

Download example: Media:JsMaps

Dynamic polyline

Shows how to add and remove markers to the map with click events, as well as how to dynamically add and remove points from polyline.

Download example: Media:JsMaps

Custom control

Simple example on making custom component control and adding/removing it from components array of the map.

Download example: Media:JsMaps

UI controls and overlays Handling

Shows UI map controls adding & removal as well as overlays discovery and adding & removing them.

Download example: Media:JsMaps

My Map position

Show on how to use the API for getting the address and position of the user, as well as how to use the positioning monitoring.

see also: Positioning

Download example: Media:JsMaps

Geo Coding

Simple example showing on how you can Geo code an address to a location utilizing the Geo coding service

see also: Geocode example

Download example: Media:JsMaps

Reverse Geo coding

Simple example showing on how you can Reverse Geo code location from an address by utilizing the reverse Geo coding service

see also: Reverse Geocode example

Download example: Media:JsMaps

Map search

Simple example showing how to do a simple text based search for places and show them in the map. Search can also be limited on specific area.

see also: Search example

Download example: Media:JsMaps


Simple example showing how you can route between two points and show the route in a map. Start and end points can also be determined via reverse geo coding, or by clicking the map.

see also: A to B routing example

Download example: Media:JsMaps

This page was last modified on 12 March 2014, at 17:17.
308 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.