IBM Worklight 6.0 - How to display a Google Maps marker based on Location Services data?

Question

I am developing a multipage app in worklight.
In this app I am trying to implement the location services provided by Worklight based on the sample app (also provided by Worklight).

I am able to get the latitude and longitude. With the latitude and longitude I am trying to locate the position in Google Maps as well as display the map. Also I want to add a marker based on the latitude and longitude.

Below is my HTML page:

<div class="longitude">Longitude: 
                <input type="text" id="long"/>
            </div>
            <div class="latitude">Latitude: 
                <input type="text" id="lat"/>
            </div>
            <div id="googleMap" style="width:500px;height:380px;"></div>  
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js key=AIzaSyBGTVsuc8dBv8o0sgBV9A8huVo36LPFMA8&sensor=false"> </script>  

And the corresponding .js file:

currentPage={};
currentPage.init = function() {
    WL.Logger.debug("LocationServices : : init");
};

function loadLatLong() {
    // start up acquisition process
    getFirstPositionAndTrack();
   // keep running while in background on Android; will show a notification
    WL.App.setKeepAliveInBackground(true);  
};



 function getFirstPositionAndTrack() {  
        window.alert('Click OK to proceed to acquire starting position');
   // we want to have an up to date, rough idea where the user is:
        var geoPolicy = WL.Device.Geo.Profiles.RoughTracking();
        // RoughTracking policy can re-use old positions (so it may only update once a minute)
        // change our policy to once a second:
        geoPolicy.maximumAge = 1000; 

    // note: to see at high-accuracy, change RoughTracking above to LiveTracking
    // get the user's current position
    WL.Device.Geo.acquirePosition(
            function(pos) {
                // when we receive the position, we display it and starton-going acquisition
                displayPosition(pos);
                triggers = {
                    Geo: {
                        posChange: { // display all movement
                            type: "PositionChange",
                            callback: function(deviceContext) {
                                    displayPosition(deviceContext.Geo);
                                }
                        },

                        leftArea: { // alert when we have left the area
                            type: "Exit",
                            circle: {
                                longitude: pos.coords.longitude,
                                latitude: pos.coords.latitude,
                                radius: 200
                            },
                            callback: function() {
                                window.alert('Left the area');
                            }
                        },

                        dwellArea: { // alert when we have stayed in the vicinity for 3 seconds
                            type: "DwellInside",
                            circle: {
                                longitude: pos.coords.longitude,
                                latitude: pos.coords.latitude,
                                radius: 50
                            },
                            dwellingTime: 3000,
                            callback: function() {
                                window.alert('Still in the vicinity');
                            }
                        }
                    }   
                };

                WL.Device.startAcquisition({ Geo: geoPolicy }, triggers, { Geo: alertOnGeoAcquisitionErr } );               
            },
            function(geoErr) {
                alert("geoErr");
                alertOnGeoAcquisitionErr(geoErr);
                // try again:
                getFirstPositionAndTrack();
            },
            geoPolicy
        ); 
}   

// display the position to the user
function displayPosition(pos) {
    /*alert(pos.coords.longitude);
    alert(pos.coords.latitude);*/
    $('#long').val(pos.coords.longitude);
    $('#lat').val(pos.coords.latitude);
    var mapProp = {
              center:new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude),
              zoom:5,
              mapTypeId:google.maps.MapTypeId.ROADMAP
              };
            var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

function alertOnGeoAcquisitionErr(geoErr) {
    window.alert('Error acquiring geo (' + geoErr.code + '): ' + geoErr.message);
}

}  

I have also added permissions in AndroidManifest.xml:

<meta-data
    android:name="com.google.android.maps.v2.API_KEY"
    android:value="AIzaSyAuYLZwW-9mFrw4mHkf-CLXOWglZBwhbhk"/> 

    <permission
        android:name="com.DemoPoC.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/>
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>
    <uses-permission android:name="com.DemoPoC.permission.MAPS_RECEIVE" />
    <uses-permission android:name="android.permission.INTERNET"/>  
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>  
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>  
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>  
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>  

can anyone please tell me what I am doing wrong?

Answer 1

There are a number of little things … Primarily, you are missing a ? between maps.googleapis.com/maps/api/js and your API key in the HTML.

If you want to have a marker on your position, you need to add it in displayPosition():

var centerMarker = new google.maps.Marker({
    position : new google.maps.LatLng(pos.coords.latitude,
            pos.coords.longitude),
    clickable : false,
    zIndex : 999,
    map : map
});

You should probably be saving map an marker in globals so that you can just move them when there is an update, rather than creating new objects.

getFirstPositionAndTrack references alertOnGeoAcquisitionErr, but that function is not defined in its scope.

And of course you don't mention it, but loadLatLong() needs to be called some time during or after wlCommonInit

With that it seems to work.