CODEWITHSUNDEEP
javascriptjquerygoogle-mapscordova
Cow
Cow

Reputation: 769

Google Maps Integration to Phonegap

I am trying to use Google Maps API v3 in my Phonegap application. Currently I am able to get the map to show up on my localhost just fine, but when I upload that to Phonegap build, and try to view it on an android emulator, the jquery mobile framework fails to load the page.

I am at a loss, I have looked at all the GMap questions on here, but found nothing that helps.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=screen.width, initial-scale=1.0, user-scalable=no" />
    <title>DD Buddy App</title>
    <link rel="stylesheet" href="themes/ddBuddy.min.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).on('mobileinit', function () {
        $.mobile.defaultPageTransition = 'slide';
    });
    </script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <script src="js/parse-1.2.16.min.js"></script>
    <!-- cordova -->
    <script src="phonegap.js"></script>
</head>
<body class="site">
    <!-- Home/Landing Page -->
    <div data-role="page" data-theme="a" id="map">
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="maps/jquery.ui.map.js"></script>
        <script type="text/javascript" src="maps/jquery.ui.map.services.js"></script>
        <div data-role="header" data-position="inline" class="header">
            <img src="img/logo.png" title="logo" class="logo" />
            <img src="img/home.png" title="home" class="homeImg" />
            <img src="img/menu.png" title="menu" class="menuImg" />
        </div>
        <div class="ui-content ui-page-theme-a" data-form="ui-page-theme-a" data-theme="a" role="main">
            <div id="map_canvas" style="width:100%;height:500px;background-color:#CCC;"></div>
        </div>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript" src="ui/jquery.ui.map.js"></script>
        <script type="text/javascript">
        $(function(){
            $("#map_canvas").gmap();
            $(".menuImg").on("touchend", function(){
                $.mobile.changePage("menu.html", {
                    transition: 'slide'
                });
            });
            $(".homeImg").on("touchend", function(){
                $.mobile.changePage("home.html", {
                    transition: 'slide'
                });
            });
        });
        </script>
    </div>
</body>
</html>

Upvotes: 1

Views: 1478

Answers (1)

Emil Borconi
Emil Borconi

Reputation: 3467

before going any further (i will look into the code), first thing I suggest is to replace all the script calls to local ones. I mean download a copy a jquery mobile and store it in your asset folder rather than calling it each time from the server. same for all the CSS and what ever can be stored locally. Do not forget you are deploying on a mobile, chances are that people will have data caps on their mobile data so you want to keep your app as light as possible data wise. I will update the answer soon, once I put a version on my phone to see what is wrong.

Emil

Your code is quite messy, it looks like a copy & paste without even checking what. I cleared it up a bit it should be more closer to this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=screen.width, initial-scale=1.0, user-scalable=no" />
    <title>DD Buddy App</title>
    <link rel="stylesheet" href="themes/ddBuddy.min.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="ui/jquery.ui.map.js"></script>
    <script src="js/parse-1.2.16.min.js"></script>
    <script src="phonegap.js"></script>
    <!-- cordova -->
</head>
<body class="site">
    <!-- Home/Landing Page -->
    <div data-role="page" data-theme="a" id="map">
         <div data-role="header" data-position="inline" class="header">
            <img src="img/logo.png" title="logo" class="logo" />
            <img src="img/home.png" title="home" class="homeImg" />
            <img src="img/menu.png" title="menu" class="menuImg" />
        </div>
        <div class="ui-content ui-page-theme-a" data-form="ui-page-theme-a" data-theme="a" role="main">
            <div id="map_canvas" style="width:100%;height:500px;background-color:#CCC;"></div>
        </div>
        <script type="text/javascript">
        $(document).on('mobileinit', function () {
        $.mobile.defaultPageTransition = 'slide';
        });
            $(function(){
            $("#map_canvas").gmap();
            $(".menuImg").on("touchend", function(){
                $.mobile.changePage("menu.html", {
                    transition: 'slide'
                });
            });
            $(".homeImg").on("touchend", function(){
                $.mobile.changePage("home.html", {
                    transition: 'slide'
                });
            });
        });
        </script>
    </div>
</body>
</html>

Notes: - Make sure you have a UI folder inside your asset/www folder which contains the jquery.ui.map.js - As mentioned before download a copy and store a copy of each JS and CSS locally and avoid making calls to the internet each time to fetch them - Make sure you remove the unnecessary library (where are you using parse js? )

Now all this being said if you do all this and use the above code, you will have the map displayed on your phone, I do not know about emulator because I never use emulator I use real devices for tests.

Upvotes: 2

Related Questions