PhoneGap: Displaying Google Maps with Markers


<!DOCTYPE html>
    <meta name="viewport" content="initial-scale=1.0" user-scalable="no"/>

<div id="map" data-role="page" id="map-page">
    <div id="map_canvas" style="width: 300px; height: 400px"></div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
                <li><a href="index.html">Home</a></li>
                <li><a href="map.html" class="ui-btn-active">Map</a> </li>

    <script type="text/javascript" charset="utf-8" src="scripts/map.js"></script>



// get called when map.html will be loaded 
$(document).delegate("#map", 'pageinit', function (event) {

function onMapLoad(){
    if( != Connection.NONE) {
        // internet available

        var fileref = document.createElement('script');
        fileref.setAttribute('type', 'text/javascript');
        // getGeolocation get fired when google maps api script loaded successfully
        fileref.setAttribute('src', '');
    } else {
        alert('Internet Connection not available.')

function getGeolocation(){
    var options = {
        maximumAge: 600000,         // We accept positions whose age is not greater than 10 minutes.
        timeout: 30000,             // if there is no cached position available at all, the user agent
                                    // will immediately invoke the error callback after "timeout" 30 seconds
        enableHighAccuracy: false   // true, if you need high accuracy
    // when the geolocation is successfully received, loadMap will be fired
    navigator.geolocation.getCurrentPosition(loadMap, geoError, options);

function loadMap(position){
    console.log("*loadMap*: " + position.coords.latitude + ' ' + position.coords.longitude);
    var latlng = new google.maps.LatLng(
        position.coords.latitude, position.coords.longitude);
    var myOptions = {
        zoom: 12,           // zoom level. more value = more details
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    var mapObj = document.getElementById("map_canvas");
    var map = new google.maps.Map(mapObj, myOptions);

    // marker will be displayed on the lat long position
    var marker = new google.maps.Marker({
        position: latlng,
        map: map

function geoError(err) {
    alert('code: ' + err.code + '\n' + 'message: ' + err.message + '\n');

One thought on “PhoneGap: Displaying Google Maps with Markers

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s