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:39, 4 January 2013 by jasfox (Talk | contribs)

HERE Maps API - Find a USA state (simple game on map utilizing reverse geocoding)

From Wiki
Jump to: navigation, search

A simple map game demonstrating how to used reverse geocoding in Nokia Maps

Article Metadata
Tested with
Devices(s): Google Chrome, Firefox
Platform(s): Web browser
Dependencies: Nokia Maps 2.2.3
Keywords: Reverse Geocoding, Nokia Maps, JavaScript
Created: Maveric (21 Jun 2011)
Updated: avnee.nathani (31 Dec 2011)
Last edited: jasfox (04 Jan 2013)



This simple game will introduce how to use the map Event listener for user map clicks, how to find the geocoordinate under the clicked mouse point and how to further use the coordinates to perform a search - all this in a form of a guessing game.


Feel free to modify and further implement your own version of this game.


Nokia Maps API supported web browser (basically any modern web browser)

The example assumes you have already added the Nokia Maps to your web page as explained in the previous article Add Maps to Any Web Page

Important note about maps credentials

Nokia provides several services options within the Maps API offering. The service is free to use, but you must obtain and use authentication and authorization credentials to use the services. Please read the Location API Business Models and Usage Restrictions page to decide which business model best fits your needs. Authentication requires unique Maps API credentials, namely an AppId and a token. You can get these credentials free from the Nokia Developer API Registration page.

In the code example below is all required HTML and embedded JavaScript, a full functional application.

Game code

The full HTML and JavaScript for the guessing game can be found below. Remember to add in your own AppId and Token to get it to work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<title>Nokia Maps game - Locate the states of USA</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript"
src="" charset="utf-8">
<body onload="init()" >
<div id="map" style="width:80%; 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");
var clicked_location = "";
var myContainer;
var searchManager;
var clicked_country;
var clicked_state;
var map;
var statesArray = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut",
"Delaware","District of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas",
"Kentucky","Louisiana","Maine","Marshall Islands","Maryland", "Massachusetts","Michigan","Minnesota",
"Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico",
"New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania", "Rhode Island",
"South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington",
"West Virginia","Wisconsin","Wyoming"];
var stateAbbrev = ["AL","AK","AZ","AR","CA","CO","CT","DE","DC","FL","GA","HI","ID","IL","IN","IA",
"NC","OH","OK","OR","PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT","VI","WA","WV","WI","WY"]
var correct_answers = 0;
var wrong_answers = 0;
var randomnumber=Math.floor(Math.random()*51);
function random_State()
alert("DOUBLE CLICK WHERE YOU THINK IS : "+statesArray[randomnumber]);
function init()
alert("Hello! Welcome to the game. Click OK to start.");
// Set the authentication token, which is needed by the web-services to authenticate your application.
nokia.maps.util.ApplicationContext.set("authenticationToken", "<Token>");
//map = new"map"), {'zoomLevel':4, 'center':[39.8, 98.57]});
map = new"map"),
components: [ new,
'zoomLevel': 4,
'center':[48.166667, -100.166667] // Geographical center of the USA
//This will remove the default functionality on the map, where double clicking on it would zoom the map. We need
//to do this to prevent that the user doubleclick would only be registered by the game and not zooming the map.
//We would like to keep the default zoom level. The user will still have the possibility to zoom the map with the
//mouse scroll wheel.
map.addListener("click", eventListener); // add the listener for mouse click
map.set("baseMapType", map.NORMAL);
function eventListener(event){
console.log("in EventListener");
clicked_location = map.pixelToGeo(event.displayX, event.displayY);
console.log("Adding a Marker there");
function add_Marker_where_clicked(){
myMarker = new;
var processResults = function (data, requestStatus, requestId) {
if (requestStatus == "OK") {
console.log (data);
clicked_country =;
clicked_state = data.location.address.state;
clicked_county = data.location.address.county;
clicked_district = data.location.address.district;
} else if(requestStatus == "ERROR") {
function mapStartReverseGeoCode(){
console.log("Reverse geocoding: "+clicked_location.toString());{
latitude: clicked_location.latitude,
longitude: clicked_location.longitude,
onComplete: processResults
function show_results(){
// alert("YOU HAD SELECTED: "+clicked_state+" "+clicked_country);
if (stateAbbrev[randomnumber] == clicked_state)
correct_answers += 1;
alert("That was CORRECT! You got 1 point"+" Correct ones: "+correct_answers+" "+"Wrong ones:"+wrong_answers);
wrong_answers += 1;
alert("That was WRONG! You got 1 point"+" Correct ones: "+correct_answers+" "+"Wrong ones:"+wrong_answers);

For more on the Nokia Maps API

Please check out the Nokia Maps API full documentation and API reference here:

You may also access the interactive API explorer

65 page views in the last 30 days.