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. Thanks for all your past and future contributions.

HERE Maps API - How to highlight a Marker

From Wiki
Jump to: navigation, search

This code example shows how to highlight a Marker, so that the marker changes colour when the mouse pointer is over it.

Article Metadata
Code ExampleTested with
Devices(s): Firefox, Internet Explorer, Google Chrome, Safari
Platform(s): Web Browser
Dependencies: HERE Maps API 2.5.3
Keywords: HERE Maps, JavaScript, Marker, highlight
Created: jasfox (09 Jan 2012)
Last edited: jasfox (20 Dec 2013)


This example demonstrates how to highlight a Marker, so that the marker's appearance is altered if the mouse pointer is left over it. As such it is a demonstration of the use of the mouseover and mouseout events.


Example code

After setting up the map in the usual manner, we define two map colors

var red =  {color: "#FF0000"};
var blue= {color: "#0000FF"};

A StandardMarker is added which listens for a mouseover event. When this occurs, the code set a highlight brush of a different color on the marker.The associated mouseout event returns the brushto the "normal" color.

function addHighlightableMarker(map) { 
var marker = new
(new nokia.maps.geo.Coordinate(41.0125,28.975833),
{brush: red});
marker.addListener("mouseover" , function(evt) {"brush", blue);
map.update(-1, 0);
marker.addListener("mouseout" , function(evt) {"brush", red);
map.update(-1, 0);

A fully working example can be found at:

Alternative Solution

Highlighting markers can easily achieved using KML syntax, since this is the sole purpose of the <StyleMap> element. The <StyleMap> consists of two "modes" - a normal mode, and a highlight mode, each of which refer to a <Style> element. If two <Style> elements refer to different <IconStyle>s, the icon will change if the marker is selected.

<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns=''>
<Style id='BlueIcon'>
<Style id='RedIcon'>
<StyleMap id="styleMapExample">

Since the latest version of the HERE Maps API is able to natively render KML files, the KML above can be loaded directly onto a map using the code from the Load KML Example of the API explorer. The <Placemark> will be rendered as a MapMarker, and the icon will change when the mouse is over the marker.

This page was last modified on 20 December 2013, at 15:52.
145 page views in the last 30 days.