Revision as of 18:05, 8 March 2012 by jasfox (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

HERE Maps API - How to interact with Markers

From Nokia Developer Wiki
Jump to: navigation, search

Underconstruction.pngUnder Construction: (20120308150527) This article is under construction and it may have outstanding issues. If you have any comments please use the comments tab.

This article explains how to set up a map event listener so that designated markers on the map are interactive. If a marker is given an $href attribute, clicking on the marker will forward the user to the given URL. If a marker is given a $click attribute, the browser will run the text of $click" attribute as JavaScript when the marker is clicked. Through a combination of these functions most map interactions should be satisfied. Since only one event listener is created, but many map objects are serviced, this is an example of event delegation.

Article Metadata
Code Example
Source file: Markers Example
Tested with
Devices(s): Google Chrome 16.0.912, Firefox 10.0.2, Internet Explorer 8
Platform(s): Web Browser
Dependencies: Nokia Maps 2.1.1
Keywords: Nokia Maps, JavaScript, Marker, Click, Link
Created: jasfox (08 Mar 2012)
Last edited: jasfox (08 Mar 2012)


First set up the map in the usual manner, then

map.addListener("click", function(evt) {	
if (( evt.target.$href === undefined) == false){
window.location = evt.target.$href;
} else if (( evt.target.$click === undefined) == false){
var onClickDo = new Function(evt.target.$click);

Adding Visual Feedback

Why visual feedback, how to do it.

function changeCursor(target, cursor){
if ((( target.$href === undefined) == false) ||
(( target.$click === undefined) == false)){
document.body.style.cursor = cursor;

Then ensure the necessary events ....

map.addListener("click", function(evt) {
changeCursor(evt.target, 'default');
.... etc ...
map.addListener("mouseover", function(evt) {
changeCursor(evt.target, 'pointer');
map.addListener("mouseout", function(evt) {
changeCursor(evt.target, 'default');

Create the markers ...

// The BLUE marker has a $href attribute and works like a link.
var brandenburgerTorMarker = new nokia.maps.map.StandardMarker(
new nokia.maps.geo.Coordinate(52.516237, 13.377686),
{$tooltip : "This is a link",
$href : 'http://en.wikipedia.org/wiki/Brandenburg_Gate',
brush: {color: '#0000FF'}}
// The GREEN marker has a $click attribute and works like a firing an onclick event.
var fernsehturmMarker = new nokia.maps.map.StandardMarker(
new nokia.maps.geo.Coordinate(52.520816, 13.409417),
{$tooltip : 'This has a click event',
$click : 'alert("Fernsehturm");',
brush: {color: '#00AA00'}}


Add categories below. Remove Category:Draft when the page is complete or near complete

190 page views in the last 30 days.