Manoj's Blog: Google map with PhoneGap app

In previous post I was described the PhoneGap development with visual studio using Nomad extension. Today I'm going to make post about create a app using a google map. Here I'm using google map API v3 for do operation with map. following shows html page of the app.


<!DOCTYPE html>
<html>
<head>
    <title>Map View</title>

    <link href="style/jquery.mobile-1.4.2.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    <div data-role="page" id="map-page" data-url="map-page">
        <div data-role="header">
            Map
        </div>

        <div data-role="content" data-position="fixed" id="map_canvas">

            <!-- map loads here... -->
        </div>

        <div data-role="footer">
            Page footer
        </div>
    </div>

    <script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.mobile-1.4.2.js"></script>
    <script type="text/javascript" src="scripts/cordova.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=true&amp"></script>


    <script type="text/javascript" src="scripts/JS/MapView.js"></script>

    <script type="text/javascript">
        $(document).ready(
            function () {

                var mapView = new PhoneGapMapApp.MapView();
                mapView.init();
            }
        );

    </script>


</body>
</html>

Im using here Jquery Mobile and wrote JavaScript class called MapView.js which is using custom object pattern. Page contain with mainly 3 parts such as header, content and footer. Content div use to create the map. Following show the MapView.js which is include the basic operations for the map.




PhoneGapMapApp = {}

PhoneGapMapApp.MapView = function () {

    this._map = 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();
    },

    /**
    * 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);

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: this._defaultLocation,
            map: this._map,
            title: "Greetings!"
        });
    }
}

To load the map here I'm using DeviceReady event belong to cordova. This event fire when phonegap fully loaded. The _getRealContentHeight method setup the height for the shows the map in the page. The _loadMap method create the map object and set the marker for already know location. In following image show the result of all this effort.

Manoj's Blog

Wednesday, March 26, 2014

Google map with PhoneGap app

No comments :

Post a Comment