HERE Maps API - get the geocoordinates when user clicks mouse over the map
(Avnee.nathani - Updated article for Nokia Maps Javascript API v2.0. (Released in Dec 2011)) |
hamishwillee
(Talk | contribs) |
Revision as of 01:45, 3 January 2012
Article Metadata
Dependencies: Nokia Maps 2.1.0
Article
Created: Maveric
(31 Dec 2010)
Last edited: hamishwillee
(03 Jan 2012)
This article shows how to get the geolocation behind user's mouse click over the map component.
The code example calls the getMouseXY function when the user clicks on the map. Note the different behaviour in case of Internet Explorer browser and other browser.
//Define the map component e.g. in style of this
//
// HTML file
//
...
<script type="text/javascript"src="http://api.maps.nokia.com/2.0.0/jsl.js" charset="utf-8"></script>
</head>
<body onload="init()">
<center>
<div id="map" style="width:640px; height:360px;"></div>
...
//
// JavaScript file
//
...
function init(){
...
// Prepare to record all mouse movements
IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
// with the above
...
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.maps.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar() ],
zoomLevel: 3,
eventListener: myListener,
center: [52.51, 13.4] // default map center point (not the location retrieved)
});
...
// Grab the user mouse x and y coordinates
...
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
return true;
}
...
// Alert the user what is the geolocation of that screen coordinate
alert(map.pixelToGeo(tempX, tempY));
...
Example alert window
