Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
111 lines (99 sloc) 4.29 KB
<!doctype html>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
<meta name="keywords" content="asyncLoadMapsLibrary,hereMapLoaderCallback,authenticate,createMap,afterHereMapLoad" />
<title>Combining HERE Maps API for JavaScript and the RESTful Map API</title>
<!-- No additional support required here. -->
<!-- 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>
<link rel="icon" href="">
<!--<link href="" rel="stylesheet" />-->
<h1>Asynchronous Loading</h1>
<p>A static map is loaded in an <code>&lt;img&gt;</code> element on page load.
The HERE Maps API for JavaScript is asychronously loaded by jQuery when the map is clicked.
Assuming the HERE Maps API has been loaded successfully, a draggable, zoomable map with a
marker on it is displayed and the node holding the static map is removed thereafter.
<div id="mapContainer" style="width:540px; height:334px;">
<img id='HereStaticMap' src=",15.5&amp;h=334&amp;w=540&amp;z=4&amp;nord&amp;nodot&amp;sb=k"
onclick="asyncLoadMapsLibrary();" alt="Map of Europe" />
<script id="example-code" data-categories="map" type="text/javascript">
function afterHereMapLoad(map) {
// This matches the static map:
map.set('center', new nokia.maps.geo.Coordinate(50.5, 15.5));
var marker = new[50.5, 15.5]);
// This method is a convenience function that intialises a map for the
// Given DOM element and at the specified location.
function createMap(location, domElement) {
var map = new, {
center: [location.longitude, location.latitude],
zoomLevel: location.zoomLevel, // Bigger numbers are closer in
components: [ // We use these components to make the map interactive
return map;
// This method is a convenience function that intialises the Settings
// to authenticate the app with the HERE Maps JS library.
function authenticate(settings) {
// Add your own appId and token here
// sign in and register on
// and obtain your own developer's API key
nokia.Settings.set('app_id', settings.appId);
nokia.Settings.set('app_code', settings.appCode);
// Use staging environment (remove the line for production environment)
nokia.Settings.set('serviceMode', 'cit');
// The language of the map can be changed here.
nokia.Settings.set('defaultLanguage', settings.language);
// This method is called once the base JS library has loaded, it
// initialises the requested features, authenticates the app to
// the library, and sets up an appropriately located map in
// the specified DOM element.
function hereMapLoaderCallback() {
var fmatrix = nokia.Features.getFeaturesFromMatrix(['maps']),
// This callback is run if the feature load was successful.
onApiFeaturesLoaded = function () {
var map = createMap(HereMapsConstants.InitialLocation,
map.addListener('displayready', function () {
}, false);
// This callback is run if an error occurs during the feature loading
onApiFeaturesError = function (error) {
alert('Whoops! ' + error);
onApiFeaturesLoaded, // an callback when everything was successfully loaded
onApiFeaturesError, // an error callback
null, // Indicates that the current document applies
false //Indicates that loading should be asynchronous
function asyncLoadMapsLibrary() {
$.getScript(HereMapsConstants.JSLibs.HereMapsUrl , hereMapLoaderCallback);
<script type="text/javascript" src="libs/prettyprint.js"></script>