Locate user with HERE Maps API internal positioning method
This article demonstrates how to show the user's location on Nokia Maps using the Nokia Maps API built-in method. Not only will it get the position, but puts a marker on that place and also shows an uncertainty circle around the position.
Article Metadata
Compatibility
Article
See Also
Contents |
Prerequisites
This example requires a supported browser and the user to accept or already permanently have accepted geolocation requests from the browser.
Implementation
This article consists of one file that has all the required HTML and JavaScript code.
"index.html"
The HTML part will load the Nokia Maps API JavaScript, defines a div for the Nokia Maps to be displayed and then execute the initialize function (init) of our script file. If needed, modify the paths and name of the file to suite your purposes.
Example code
HTML file ”index.html”
<!-- This example shows Nokia Maps with a marker on location retrieved using Nokia Maps API internal method-->
<html>
<head>
<script type="text/javascript"
src="http://api.maps.nokia.com/2.2.3/jsl.js" charset="utf-8">
</script>
</head>
<body onload="init()">
<center>
<div id="map" style="width:640px; height:360px;"></div>
</center>
<script type="text/javascript">
var map;
var marker;
var my_latitude;
var my_longitude;
var positioning;
var coords;
function init(){
// Don't forget to set your API credentials
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
alert ("Note: Please accept the location request from your browser in order to view your location on the Nokia Maps.");
map = new nokia.maps.map.Display(document.getElementById("map"),
{
components: [ new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Overview(),
new nokia.mapsi.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar() ],
zoomLevel: 3,
center: [52.51, 13.4] // default map center point (not the location retrieved)
});
positioning = new nokia.maps.positioning.Manager();
positioning.getCurrentPosition(
function(position) {
coords = position.coords;
showMyPosition(coords);
}
);
}
function showMyPosition(p)
{
var marker = new nokia.maps.map.StandardMarker(p);
var accuracyCircle = new nokia.maps.map.Circle(p, p.accuracy);
map.objects.addAll([accuracyCircle, marker]);
map.zoomTo(accuracyCircle.getBoundingBox(), false, "default");
}
</script>
</body>
</html>
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
