HERE Maps API - Locate user with HTML5 Geolocation API
This article demonstrates how to display the user location on Ovi Maps using the HTML5 Geolocation API feature.
Article Metadata
Tested with
Compatibility
Article
See Also
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 two files:
"index.html" and "location.js"
The HTML part will load the HERE Maps API JavaScript, our external JavaScript file (location.js), define a div for the HERE Maps to be displayed and then execute the initialize function (init) of our script file.Modify the paths for your purpose on location.js and index.html, depending on your configuration if you run this on localhost or a remote server.
Example code
HTML file ”index.html”
<html>
<head>
<title>NokiaMapsAPI - HTML5 GeoLocation example</title>
<script type="text/javascript"
src="http://api.maps.nokia.com/2.2.4/jsl.js" charset="utf-8">
</script>
<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 http://api.developer.nokia.com/
//
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
//
/////////////////////////////////////////////////////////////////////////////////////
</script>
<script src="js/location.js" type="text/javascript" charset="utf-8"></script>
</head>
<center>
<body onload="init()">
<div id="nokiamaps" style="width:800px; height:600px;"></div>
</body>
</center>
</html>
JavaScript file ”location.js”
var map;
var marker;
function init()
{
alert("Please accept the location request from your browser to make this example work.");
map = new nokia.maps.map.Display(document.getElementById("nokiamaps"),
{ components: [ new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Overview(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar() ],
zoomLevel: 2,
center: [52.51, 13.4]
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMapMarker);
}
else {
alert("Your browser does not support geolocation, or was denied to provide the information.");
}
}
function showMapMarker(p)
{
marker = new nokia.maps.map.StandardMarker([p.coords.latitude, p.coords.longitude],
{
text: "Your geolocation info tracks you here",
draggable: false
}
);
map.objects.add(marker);
marker.addListener("load", function(event) {
alert ("marker image loaded successfully");
});
marker.addListener("error", function(event) {
alert ("marker image load failed");
});
marker.addListener("abort", function(event) {
alert ("marker image load was aborted");
});
marker.set("icon", "http://www.developer.nokia.com/images/logo-forumnokia.gif");
}
The parameter text for the Marker is left in if you decide not to use the loaded image. Setting the marker parameter draggable: false, means simply that the icon/marker is fixed at the position it was initialized at. The user cannot drag/drop it.
And for the icon image, you can use any other graphics you want, local or remote. The position of the loaded icon does not represent more than an rough approximation for the user location. You should consider also using a precision marker, the HERE Maps API internal location request, latitude and longitude coordinates display and so on. But this example should however work as a general example of how to initialize a simple map, set the zoom level, and other components you want to show the user and how to utilize the image loading for the marker alongside the actual HTML5 Geolocation request.
For more detailed information on the HERE Maps API, full online API documentation and online playground to test examples, please go to: http://developer.here.net/docs/maps_js/topics/positioning.html
Avnee.nathani - Article rename
I've updated the article to Nokia Maps Javascript API v2.0 - updated/ added new code and links, removed broken links, rebranded to 'Nokia Maps', etc. The article needs to be renamed to Nokia Maps API - Locate user with...
Thanks!avnee.nathani 12:36, 31 December 2011 (EET)