How can i move/drag to a position,a nokia.maps.map.StandardMarker with a button event

**upixsoul** · 2012-06-02, 19:56

How can i move/drag to a position,a nokia.maps.map.StandardMarker with a button event?

i want to move to a random place a StandardMarker when i load a page, or when i press a button, how can i call the event?

**jasfox** · 2012-06-04, 09:28

You'll just need to add a JavaScript function such as moveRandomly() below and call it from the onclick() event of the button. A marker can be moved by calling Marker.set("coordinate", coord);

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>

**upixsoul** · 2012-06-04, 17:20

thanks! its a great example!

Discussion Board

Thread: How can i move/drag to a position,a nokia.maps.map.StandardMarker with a button event

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

Drag / Move события в exe

Font size of Ovi Maps + StandardMarker shown incorrectly

Pointer Move/Drag event in Javascript

How to capture star button (Maps) event on 6210 Navigator

Posting Permissions