Revision as of 12:51, 9 January 2012 by jasfox (Talk | contribs)

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

HERE Maps API - How to highlight a Marker

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleTested with
Devices(s): Firefox 7.0.1
Platform(s): Web Browser
Created: jasfox (09 Jan 2012)
Last edited: jasfox (09 Jan 2012)

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


This example demonstrates how to highlight a marker, so that the marker's 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 Standard Marker 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

Tested with

Firefox 7.0.1

189 page views in the last 30 days.