Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
102 lines (93 sloc) 4 KB
<!doctype html>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
<meta name="keywords" content="addClickEventListener,processResults" />
<title>HERE Maps API Example: Find a USA state</title>
<!-- Set up constants such as APP ID and token -->
<script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
<!-- Bootstrap jQuery Library -->
<script type="text/javascript" src="../libs/jQl.min.js"></script>
<!-- Asynchronously the HERE Maps API for JavaScript -->
<script type="text/javascript" src="../libs/hereAsyncLoader.js"
data-callback="afterHereMapLoad" >
<link rel="icon" href=""/>
<!--<link href="" rel="stylesheet" />-->
<h1>Reverse Geocoding Game : Find a USA state </h1>
<p>This simple game introduces 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 reverseGeoCode() search - all this in a form of a guessing game.</p>
<div id="question" style="height: 2.0em; font-size: 2em; color: blue;"></div>
<div id="answer" style="height: 2.0em; font-size: 2em; color: blue;"></div>
<span id="correct_answers" style="height: 2.0em; font-size: 2em; color: green;"></span>
<span id="incorrect_answers" style="height: 2.0em; font-size: 2em; color: green;"></span>
<div id="mapContainer" style="width:540px; height:334px;"></div>
<script id="example-code" data-categories="search,events" type="text/javascript" >
var map,
right = 0,
wrong = 0,
statesArray = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut',
'Delaware', 'District of Columbia', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas',
'Kentucky', 'Louisiana', 'Maine', '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'];
function select_random_state() {
randomnumber = Math.floor(Math.random() * 50);
$('#question').text('Find : ' + statesArray[randomnumber]);
function processResults(data, requestStatus) {
if (requestStatus === 'OK' ) {
if (data.location !== undefined) {
var state = data.location.address.state;
if (statesArray[randomnumber] === state) {
$('#answer').text('Correct answer, that was:' + state);
right += 1;
} else {
$('#answer').text('That was:' + state);
wrong += 1;
$('#correct_answers').text('Correct:' + right);
$('#incorrect_answers').text('Wrong:' + wrong);
function addClickEventListener(map) {
var TOUCH = nokia.maps.dom.Page.browser.touch,
CLICK = TOUCH ? 'tap' : 'click';
map.addListener(CLICK, function (event) {
var coordinate = map.pixelToGeo(event.displayX, event.displayY);
latitude: coordinate.latitude,
longitude: coordinate.longitude,
onComplete: processResults
function afterHereMapLoad(theMap) {
map = theMap;
map.set('center', new nokia.maps.geo.Coordinate(42.16, -100.16));
map.set('zoomLevel', 3);
<script type="text/javascript" src="../libs/prettyprint.js"></script>
Something went wrong with that request. Please try again.