Revision as of 06:22, 24 April 2013 by hamishwillee (Talk | contribs)

HERE Maps API - How to highlight a Marker

From Nokia Developer 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: Nokia Maps API 2.2.3
Keywords: Nokia Maps, JavaScript, Marker, highlight
Created: jasfox (09 Jan 2012)
Last edited: hamishwillee (24 Apr 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 colours

var red = "#FF0000";
var blue= "#0000FF";

A StandardMarker is added which listens for a mouseover event. When this occurs, the code adds a highlight marker of a different colour in the same place, and makes the normal marker invisible. A reference back to the normal marker is added to the highlight marker, which in turn holds a mouseout event. When the mouseout event is fired, the highlight marker is removed , and the normal marker made visible again.

var	normalMarker =  new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(41.0125,28.975833), {brush: {color: red}});
normalMarker.addListener("mouseover" , function(evt) {
evt.target.visible = false;
var highlightMarker = new nokia.maps.map.StandardMarker(evt.target.coordinate, {brush: {color: blue}});
highlightMarker.normal = evt.target;
highlightMarker.addListener("mouseout" , function(evt) {
evt.target.normal.visible = true;
}, false);
}, false);

The fully coded example can be found here : Media:HighlightedMarkerExample.zip

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='http://www.opengis.net/kml/2.2'>
<Style id='BlueIcon'>
<Style id='RedIcon'>
<StyleMap id="styleMapExample">

Since the latest version of the Nokia 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.

Tested with

Firefox 12x

193 page views in the last 30 days.