HERE Maps API - Show user's current location details (Address) in an info bubble
HERE Maps - Show user's current location details (Address) in an info bubble
Contents |
Introduction
This article explains how to show the current address (Street, House number, Postal code, County, Country) of a user. In order to get the result the following APIs have been made use of
- Reverse geocoder
- HTML5 Geolocation API
- HERE Maps info bubbles
and finally the Nokia API itself
Reverse Geocoder
Reverse geocoding is the process of finding geographic data such as addresses, country or zip codes (postal codes) from geographic coordinates such as latitude and longitude
//Send the latitude and longitude in the variable address where address is position.coords.latitude, position.coords.longitude
nokia.places.search.manager.reverseGeoCode({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
onComplete: processResults
})
// The Reverse geocoder call returns providing the following two statuses
//1. 'OK' - recieved the address
//2. 'ERROR' - geocoder failed
function processResults(data, requestStatus, requestId) {
}
HERE Maps info bubbles
//Info bubble object
myInfoBubbles = new nokia.maps.map.component.InfoBubbles();
// set the position and conetent of the infobubble
var myAddress = "<div>"+addressDetails+"</div>";
myInfoBubbles.addBubble(myAddress, new nokia.maps.geo.Coordinate(posLatitude, posLongitude));
Complete source code
The complete HTML & JavaScript is shown below. Add in your own AppId and Token to get it to work.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script src="http://api.maps.nokia.com/2.2.4/jsl.js" type="text/javascript" charset="utf-8">
</script>
<style type="text/css">
#map {
height: 600px;
width: 950px;
border:10px solid #000000;
}
</style>
<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");
/////////////////////////////////////////////////////////////////////////////////////
var geocoder;
var myInfoBubbles;
var posLatitude;
var posLongitude ;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
posLatitude = position.coords.latitude;
posLongitude = position.coords.longitude;
myInfoBubbles = new nokia.maps.map.component.InfoBubbles();
var map = new nokia.maps.map.Display(document.getElementById("map"), // new instance of Ovi Maps
{
components: [
myInfoBubbles,
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': 15,
'center':[posLatitude, posLongitude]
});
nokia.places.search.manager.reverseGeoCode({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
onComplete: processResults
})},
// Something went wrong we wee unable to retrieve the GPS location
function (error) {
var errorMsg = "Location could not be determined: ";
// We determine what caused the error and generate error message
if (error.code == 1) errorMsg += "PERMISSION_DENIED";
else if (error.code == 2) errorMsg += "POSITION_UNAVAILABLE";
else if (error.code == 3) errorMsg += "TIMEOUT";
else errorMsg += "UNKNOWN_ERROR";
// Throw an alert with error message
alert(errorMsg);
}
);
} else {
alert("Geolocation API is not supported in your browser.Please upgrade your browser");
}
function processResults(data, requestStatus, requestId) {
var addressDetails ="";
if(requestStatus == "ERROR") {
alert("Rev Geocoding failure");
} else if (requestStatus == "OK") {
var address = data.location.address;
if (address.street) {
addressDetails = addressDetails +" , "+ address.street;
}
if (address.houseNumber) {
addressDetails = addressDetails +" , "+ address.houseNumber;
}
if (address.city) {
addressDetails = addressDetails +" , "+ address.city;
}
if (address.district) {
addressDetails = addressDetails +" , "+ address.district;
}
if (address.postalCode) {
addressDetails = addressDetails +" , "+ address.postalCode;
}
if (address.state) {
addressDetails = addressDetails +" , "+ address.state ;
}
if (address.county) {
addressDetails = addressDetails +" , "+ address.county;
}
if (address.country) {
addressDetails = addressDetails +" , "+ address.country;
}
var myAddress = "<div>"+addressDetails+"</div>";
myInfoBubbles.addBubble(myAddress, new nokia.maps.geo.Coordinate(posLatitude, posLongitude));
}
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Browsers tested
Mozilla Firefox Chrome Safari
screenshots
(no comments yet)