HERE Maps API - How to interact with Markers

Under 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

---

Compatibility

Platform(s): Web Browser

Dependencies: Nokia Maps 2.1.1

---

Article

Keywords: Nokia Maps, JavaScript, Marker, Click, Link

Created: jasfox (08 Mar 2012)

Last edited: jasfox (08 Mar 2012)

See Also

• Nokia Maps API
• Adding a Marker
• Image Markers using Sprites
• Event Delegation Example
• Nokia Maps API - How to add map markers
• Nokia Maps API - How to create a Tooltip

Introduction

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);
			onClickDo(); 
  }
});

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'}}
);

Summary

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