×
Namespaces

Variants
Actions
Revision as of 15:00, 28 November 2013 by jasfox (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Show my location using HTML5 Geolocation API and HERE Maps

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to capture a user location using HTML Geolocation API and display the user's location on nokia map

Introduction

HTML5 geolocation api provides support to capture one's location by capturing the latitude and longitude where the user is based. So by using a combination of geolocation api and HERE Maps it is possible to display one's location on a web page. Please note that the accuracy of the location depends on the correctness of the latitude and longitude that is captured.

Geolocation

The geolocation api comes along with HTML 5 and hence it is supported in almost all the latest browsers - Firefox, Chrome, Internet Explorer, Safari, Opera etc. In order to retrieve geolocation, the user needs to explicitly give permission to share his/her location.

The "if (nokia.maps.positioning.Manager)" condition provides whether the browser used by the user supports geolocation or not.

The following code captures the latitude and longitude of the user

 function locateUser(map){
if (nokia.maps.positioning.Manager) {
var positioning = new nokia.maps.positioning.Manager();
// Alternatrively : navigator.geolocation.getCurrentPosition()
positioning.getCurrentPosition(
function (position) {
var coords = position.coords,
marker = new nokia.maps.map.StandardMarker(coords),
accuracyCircle = new nokia.maps.map.Circle(coords, coords.accuracy);
map.objects.addAll([accuracyCircle, marker]);
map.zoomTo(accuracyCircle.getBoundingBox(), false, "default");
},
// Something went wrong we were unable to retrieve the GPS location
function (error) {
var errorMsg = "Location could not be determined: ";
errors = ["PERMISSION_DENIED", "POSITION_UNAVAILABLE","TIMEOUT"];
if (error.code < 4){
errorMsg += errors[i-1]
} else {
errorMsg += "UNKNOWN ERROR";
}
alert(errorMsg);
}, {maximumAge: 750}
);
}
}

The following fully working example can be found at:

http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/simple-examples/find-user-position.html

Finding the Address of a Geolocation

This can be done through simply the adding a reverseGeocode() call after obtaining the geolocation coordinate:

function (position) {
map.set("center", position.coords);
nokia.places.search.manager.reverseGeoCode({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
onComplete: displayAddress
});
},

With the code to display the address being added to the callback function displayAddress()

function displayAddress(data, requestStatus, requestId)  {
infoBubbles.openBubble(data.location.address.text,
data.location.position);
}

FindAddressExample.png


The following fully working example can be found at:

http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/simple-examples/find-user-address.html


Article Metadata
Code ExampleTested with
Devices(s): Internet Explorer, Firefox, Google Chrome, Safari
Compatibility
Platform(s): Web
Dependencies: HERE Maps 2.5.3
Article
Keywords: Geocoding, Positioning
Created: wang_shui (27 Dec 2011)
Last edited: jasfox (28 Nov 2013)
This page was last modified on 28 November 2013, at 15:00.
265 page views in the last 30 days.
×