Show current location of the PhoneGap map app

In last post I was described the way to develop PhoneGap map app using google map API v3. In this post Im going to show you how to get the user current location and show it on the map as marker. For this approach I use same code I wrote for the previous post. In below showing the implementation I did to achieve this task.

PhoneGapMapApp = {}

PhoneGapMapApp.MapView = function () {

    this._map = null;
    this._currentLocation = null;
}


PhoneGapMapApp.MapView.prototype = {

    init: function () {

        this._defaultLocation = new google.maps.LatLng(6.5006036, 80.2711642);
        this._attachEventHandlers();
    },

    /**
    * Attach event handlers.
    */
    _attachEventHandlers: function () {

        document.addEventListener("deviceready", this._onDeviceReady(this), false);
        
    },

    /**
    * device APIs are available.
    */
    _onDeviceReady: function (obj) {
        console.log('device ready');

        obj._getRealContentHeight();
        obj._loadMap();
        obj._identifyCurrentLocation();
    },

    /**
    * Setup the content hieght.
    */
    _getRealContentHeight: function () {
        
        var header = $.mobile.activePage.find("div[data-role='header']:visible");
        var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
        var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
        var viewport_height = $(window).height();

        var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
        if ((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
            content_height -= (content.outerHeight() - content.height());
        }
        
        $('#map_canvas').height(content_height);
    },

    /**
    * create map.
    */
    _loadMap: function () {

        var myOptions = {
            zoom: 4,
            center: this._defaultLocation,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };    

        this._map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    },

    /**
    * Identify current location.
    */
    _identifyCurrentLocation: function () {

        if (navigator.geolocation) {

        browserSupportFlag = true;

        var that = this;

        var currentPositionCallback = function (position) {
            that._identifyCurrentLocationCompleted(position);
        };

        var noGeolocationCallback = function () {
            that._handleNoGeolocation(browserSupportFlag);
        };

        navigator.geolocation.getCurrentPosition(
            currentPositionCallback,
            noGeolocationCallback, { 'enableHighAccuracy': true, 'timeout': 20000 });
    }
    else {

        browserSupportFlag = false;
        this._handleNoGeolocation(browserSupportFlag);
    }
},

/**
* Handles the situation when current location not found 
* or not allow from the user for access current location.
*/
_handleNoGeolocation: function (errorFlag) {
    
    this.goTo(this._defaultLocation);
},

/**
* Current location identify operation success callback.
*/
_identifyCurrentLocationCompleted: function (position) {

    this._currentLocation = new google.maps.LatLng(
        position.coords.latitude,
        position.coords.longitude);

    this.goTo(this._currentLocation);
},

/**
* Show current location in the map.
*/
goTo: function (position) {

    this._setMarkerForLocation(position);
    this._map.setCenter(position);
},

/**
* Set marker for location.
*/
_setMarkerForLocation: function (latLng) {

    var marker = new google.maps.Marker({
        position: latLng,
        map: this._map,
        title: "Greetings!"
    });
},

}



The _identifyCurrentLocation method called by after create the map object. In this method has success callback and failure callback. In _setMarkerForLocation method set marker for the current location. If current location not found then app will shows the default location.