×

Discussion Board

Results 1 to 2 of 2
  1. #1
    Registered User
    Join Date
    Feb 2013
    Location
    Santa Tecla
    Posts
    5

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

    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

  2. #2
    Nokia Developer Moderator
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

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

    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>

Similar Threads

  1. Replies: 3
    Last Post: 2012-04-20, 09:25
  2. set latitude and Longitude
    By sridharbandi in forum Symbian
    Replies: 4
    Last Post: 2010-12-27, 06:35
  3. Set Latitude and Set Longitude
    By sridharbandi in forum Mobile Java General
    Replies: 6
    Last Post: 2010-12-15, 13:21

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •