How can I get the longitude and latitude of a draggable marker in Nokia Maps?

**FANMixco** · 2013-02-23, 04:38

I have found this code and it works very well but I'd like to know how to get that information, longitude and latitude of the draggable marker I would like to show the info maybe in some textbox or an alert. This is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.0/jsl.js?routing=auto"></script>
    <title>Random Marker</title>
</head>
<body>
 
<div id="button" style="top:0%; width:100%; height:10%; position: absolute;"><input type="button" onclick="moveRandomly()" value="Press Me" /></div>
<div id="mapContainer" style="top:10%; width:100%; height:70%; position: absolute;"></div>
 
<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");
//                     
/////////////////////////////////////////////////////////////////////////////////////
 
//initialize a new map
var display = new nokia.maps.map.Display(document.getElementById("mapContainer"),
                     {     "components": [     
                                     new nokia.maps.map.component.ZoomBar(),                
                                     new nokia.maps.map.component.Behavior(),                
                                     new nokia.maps.map.component.TypeSelector()],    
                                     "zoomLevel": 13,
                                     "center" : [52.500556, 13.398889] });
 
// Place this anywhere in the world.
var draggableMarker = new nokia.maps.map.StandardMarker([52.500556, 13.398889],
{  
text:  "X",  
brush: {color: '#FF0000'} ,                
draggable: true,                    
});  
// Add the marker to the map.
 
display.objects.add(draggableMarker);
 
function moveRandomly(){
                // This function will move a marker around the currently visible display.
                var viewPort = display.getViewBounds();
                 var coord = new nokia.maps.geo.Coordinate (viewPort.topLeft.latitude  - Math.random()*viewPort.getHeight(),
                  viewPort.topLeft.longitude + Math.random()*viewPort.getWidth()
                 );
                 draggableMarker.set("coordinate", coord);
}
 
</script>
</body>
</html>

Thank you very much for your help :D

**jasfox** · 2013-02-25, 08:10

The answer to this question can be found in the API reference. You can get the longitude and latitude of a StandardMarker (indeed any sort of MapMarker) by accessing its coordinate property. see :

http://developer.here.com/docs/maps_...ardMarker.html

You can add a listener to the StandardMarker's click event to open an infobubble as shown:

Code:

// Add Click
draggableMarker.addListener(
	"click", 
	function (evt) { 
		// Set the tail of the bubble to the coordinate of the marker
		infoBubbles.openBubble("InfoBubble is at "  +  draggableMarker.coordinate , draggableMarker.coordinate);
	}
);

Have a look at this example from the API explorer to see how to use an Infobubble

I've added this to your original code to get an infobubble to show the lat long - You could use the reverse geocoding service to get more information about the address at the coordinate if you wish.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?routing=auto"></script>
    <title>Random Marker</title>
</head>
<body>
 
<div id="button" style="top:0%; width:100%; height:10%; position: absolute;"><input type="button" onclick="moveRandomly()" value="Press Me" /></div>
<div id="mapContainer" style="top:10%; width:100%; height:70%; position: absolute;"></div>
 
<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");
//                     
/////////////////////////////////////////////////////////////////////////////////////
 
//initialize a new map
var infoBubbles = new nokia.maps.map.component.InfoBubbles();

var display = new nokia.maps.map.Display(document.getElementById("mapContainer"),
                     {     "components": [
                     				 infoBubbles,     
                                     new nokia.maps.map.component.ZoomBar(),                
                                     new nokia.maps.map.component.Behavior(),                
                                     new nokia.maps.map.component.TypeSelector()],    
                                     "zoomLevel": 13,
                                     "center" : [52.500556, 13.398889] });
 
// Place this anywhere in the world.
var draggableMarker = new nokia.maps.map.StandardMarker([52.500556, 13.398889],
{  
text:  "X",  
brush: {color: '#FF0000'} ,                
draggable: true,                    
});  

// Add Click
draggableMarker.addListener(
	"click", 
	function (evt) { 
		// Set the tail of the bubble to the coordinate of the marker
		infoBubbles.openBubble("InfoBubble is at "  +  draggableMarker.coordinate , draggableMarker.coordinate);
	}
);

// Add the marker to the map.
 
display.objects.add(draggableMarker);
 
function moveRandomly(){
                // This function will move a marker around the currently visible display.
                var viewPort = display.getViewBounds();
                 var coord = new nokia.maps.geo.Coordinate (viewPort.topLeft.latitude  - Math.random()*viewPort.getHeight(),
                  viewPort.topLeft.longitude + Math.random()*viewPort.getWidth()
                 );
                 draggableMarker.set("coordinate", coord);
}
 
</script>
</body>
</html>

Discussion Board

Thread: How can I get the longitude and latitude of a draggable marker in Nokia Maps?

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

JavaME Nokia Maps API: how to display additional info on marker click?

How to Diplay infobubbles for the custom image marker in Nokia MAPs

How to open Ovi Maps application at given latitude, longitude from my own app?

set latitude and Longitude

Set Latitude and Set Longitude

Posting Permissions