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.

Revision as of 11:38, 14 March 2013 by jasfox (Talk | contribs)

HERE Maps API - get the geocoordinates when user clicks mouse over the map

From Wiki
Jump to: navigation, search
Article Metadata
Tested with
Devices(s): Internet Explorer, Google Chrome, Firefox, Opera
Platform(s): Web
Dependencies: Nokia Maps 2.2.4
Keywords: NokiaMaps, JavaScript, geocoordinates
Created: Maveric (31 Dec 2010)
Last edited: jasfox (14 Mar 2013)

This article shows how to get the geolocation of the user's mouse click.

The code example sets up an Event Listener on the click event of the Map Display. The x and y pixel values are extracted from evt.displayX and evt.displayY and converted to geo.Coordinates. Remember to add in your own AppId and Token to get the example to work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<title>Get Geocoordinates on Click</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript"
src="" charset="utf-8">
<div id="mapContainer" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>
<script type="text/javascript">
// Don't forget to set your API credentials
// Replace with your appId and token which you can obtain when you
// register on
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new, {
// Initial center and zoom level of the map
center: [52.51, 13.4],
zoomLevel: 10,
components: [
/* Attach an event listener to map display
* push info bubble with coordinate information to map

map.addListener("click", function (evt) {
var coord = map.pixelToGeo(evt.displayX, evt.displayY);
alert("Clicked at " + coord);

Example alert window


104 page views in the last 30 days.