Re: Google Map only shows grey background

4,523 views
Skip to first unread message
Message has been deleted

Lukas Menges

unread,
Sep 12, 2013, 5:27:20 AM9/12/13
to phon...@googlegroups.com


Am Donnerstag, 12. September 2013 11:25:59 UTC+2 schrieb Lukas Menges:
Hello,
i want to add a map to my app with phonegap and jqm. I load the map asynchronous and got as callback the initialize function. But the map shows only grey, with the "satellite" controls and the google logo. Anyone can help?

This is my code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" >
        <link rel="stylesheet" href="css/styles.css" >
        <script src="js/jquery-1.8.3.min.js"></script>
        <script src="js/jquery.mobile-1.3.1.min.js"></script>
        <script type="application/javascript" src="js/fastclick.js"></script>
        <script src="cordova.js"></script>

    </head>

<body>
    <!-- START PAGE -->
    <div data-role="page" id="tellthedj">

        <!-- JS START -->
        <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
            google.maps.event.trigger(map, "resize");
      }
    </script>
        <script>
        function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
      'callback=initialize';
  document.body.appendChild(script);
}</script>
        <script src="js/functions.js"></script>





        <!-- JS ENDE -->

        <script>
            $(document).off('pageshow', '#tellthedj').on('pageshow', '#tellthedj', function () {


                // Fastclick und Default Transitions
                FastClick.attach(document.body);
                $.mobile.defaultPageTransition   = 'none';
                $.mobile.defaultDialogTransition = 'none';
                $.mobile.buttonMarkup.hoverDelay = 0;

                // GET URL Parameter
                stadt = GetURLParameter('stadt');
                eventName = GetURLParameter('eventName');
                eventID = GetURLParameter('id');

                // Header beschriften
                $('#headline').empty();
                $('#headline').append("<span class='head_thin'>"+eventName+"</span>");


                loadScript();


            });
        </script>
        <!-- JS ENDE -->

        <!-- START HEADER -->
        <div data-role="header" class="header" data-id="persistent" data-position="fixed" data-tap-toggle="false">
            <h1 id="headline"></h1>
            <a data-role="none" class="events_button ui-btn-right"><img src="img/events_button.png"></a>
        </div>
        <!-- ENDE HEADER -->


        <!-- START CONTENT -->
        <div data-role="content">
            <div data-role="none" id="map_canvas" style="height:600px; width:600px;"></div>
        </div>
        <!-- ENDE CONTENT -->


        <!-- START FOOTER -->
        <div data-role="footer" data-position="fixed" id="footer" data-id="footer" data-tap-toggle="false">
            <div data-role="none" class="menu_home"><img src="img/navi_home.png"><div data-role="none" class="navi_schrift" >Home</div></div>
            <div data-role="none" class="menu_music"><img src="img/navi_location_active.png"><div data-role="none" class="navi_schrift" style="color:#460f44">Location</div></div>
            <div data-role="none" class="menu_review"><img src="img/navi_review.png"><div data-role="none" class="navi_schrift">Bewertungen</div></div>
            <div data-role="none" class="menu_photos"><img src="img/navi_photo.png"><div data-role="none" class="navi_schrift">Fotos</div></div>
        </div>
        <!-- ENDE FOOTER -->

    </div>
    <!-- ENDE PAGE -->
</body> 
</html> 

Lukas Menges

unread,
Sep 18, 2013, 7:48:32 AM9/18/13
to phon...@googlegroups.com
Noone knows a solution??


Dan Moore

unread,
Sep 18, 2013, 8:09:59 AM9/18/13
to phon...@googlegroups.com
Have you made sure to add the needed google domains to your whitelist?  If so, can you post that portion of your config.xml?

I ran into an issue where I had to list specific machine names; wildcarding didn't work.

--
Dan Moore
Developing with Cordova CLI

On Wednesday, September 18, 2013 5:48:32 AM UTC-6, Lukas Menges wrote:
Noone knows a solution??


Lukas Menges

unread,
Oct 3, 2013, 6:57:54 AM10/3/13
to phon...@googlegroups.com
Yeah all the Domains are added. It´s strange because xCode isn´t showing any error like other whitelist rejections.
The map shows about half a second and disappears. The grey background is left. 

Here is my config.xml:

<?xml version='1.0' encoding='utf-8'?>

 

<widget id="io.cordova.helloCordova" version="2.0.0" xmlns="http://www.w3.org/ns/widgets">

    <name>Hello Cordova</name>

    <description>

        A sample Apache Cordova application that responds to the deviceready event.

    </description>

    <author email="d...@cordova.apache.org" href="http://cordova.io">

        Apache Cordova Team

    </author>

    <content src="index.html" />

    <feature name="LocalStorage">

        <param name="ios-package" value="CDVLocalStorage" />

    </feature>

    <access origin="http://www.coldfusionjedi.com" />

    <access origin="http://www.google.com" />

    <access origin="http://dev.tellthedj.de" />

    <access origin="https://maps.googleapis.com" />

     <access origin="http://maps.googleapis.com" />

    <access origin="http://maps.gstatic.com" />

    <access origin="http://127.0.0.1*" />

    <access origin="http://csi.gstatic.com" />

    <access origin="*.googleapis.com" />

    <access origin="*.googleusercontent.com" />

    <access origin="http://mt0.googleapis.com" />

    <access origin="http://fonts.googleapis.com" />

    <preference name="KeyboardDisplayRequiresUserAction" value="true" />

    <preference name="ShowSplashScreenSpinner" value="false" />

    <preference name="DisallowOverscroll" value="true" />

    <preference name="SuppressesIncrementalRendering" value="false" />

    <preference name="UIWebViewBounce" value="false" />

    <preference name="TopActivityIndicator" value="gray" />

    <preference name="EnableLocation" value="false" />

    <preference name="EnableViewportScale" value="false" />

    <preference name="AutoHideSplashScreen" value="true" />

    <preference name="MediaPlaybackRequiresUserAction" value="false" />

    <preference name="AllowInlineMediaPlayback" value="false" />

    <preference name="OpenAllWhitelistURLsInWebView" value="false" />

    <preference name="BackupWebStorage" value="cloud" />

    <preference name="permissions" value="none" />

    <preference name="orientation" value="default" />

    <preference name="target-device" value="universal" />

    <preference name="fullscreen" value="true" />

    <preference name="webviewbounce" value="true" />

    <preference name="prerendered-icon" value="true" />

    <preference name="stay-in-webview" value="false" />

    <preference name="ios-statusbarstyle" value="black-opaque" />

    <preference name="detect-data-types" value="true" />

    <preference name="exit-on-suspend" value="false" />

    <preference name="show-splash-screen-spinner" value="true" />

    <preference name="auto-hide-splash-screen" value="true" />

    <preference name="disable-cursor" value="false" />

    <preference name="android-minSdkVersion" value="7" />

    <preference name="android-installLocation" value="auto" />

    <feature name="Device">

        <param name="ios-package" value="CDVDevice" />

    </feature>

    <feature name="NetworkStatus">

        <param name="ios-package" value="CDVConnection" />

    </feature>

    <feature name="Camera">

        <param name="ios-package" value="CDVCamera" />

    </feature>

    <feature name="File">

        <param name="ios-package" value="CDVFile" />

    </feature>

    <feature name="Capture">

        <param name="ios-package" value="CDVCapture" />

    </feature>

    <feature name="FileTransfer">

        <param name="ios-package" value="CDVFileTransfer" />

    </feature>

    <feature name="Notification">

        <param name="ios-package" value="CDVNotification" />

    </feature>

    <feature name="SplashScreen">

        <param name="ios-package" value="CDVSplashScreen" />

        <param name="onload" value="true" />

    </feature>

    <feature name="Console">

        <param name="ios-package" value="CDVLogger" />

    </feature>

</widget>


I hope you got a solution for this!
Thx!!

Dan Moore

unread,
Oct 3, 2013, 10:57:08 PM10/3/13
to phon...@googlegroups.com
Hi Lukas,

Here is the access portion of my config.xml that allowed me to display google maps on both iOS and Android.  This is with Cordova 2.9.  3.1 revamped the whitelist syntax, so I'm not sure if it is the same.

<!-- for google maps -->
<access origin="*.googleapis.com" />
<access origin="*.gstatic.com" />
<access origin="*.google.com" />
<access origin="maps.googleapis.com" />
<access origin="maps.gstatic.com" />
<access origin="mt0.googleapis.com" />
<access origin="mt1.googleapis.com" />
<access origin="csi.gstatic.com" />

You can see more at https://issues.apache.org/jira/browse/CB-4546

I think this was due to some interaction between backbone and google maps, but am not sure.  Can you try my access tags and see if that helps?


--
Dan Moore
Developing with Cordova CLI
https://leanpub.com/developingwithcordovacli

Lukas Menges

unread,
Oct 6, 2013, 8:56:41 AM10/6/13
to phon...@googlegroups.com
Finally found a solution to that problem: 

THIS TAG in config.xml
<preference name="OpenAllWhitelistURLsInWebView" value="false" />

was set to "false". Setting it "true" the map appears. Thank you for your help!
Greetings

Aminul Islam

unread,
Oct 8, 2013, 3:01:36 PM10/8/13
to phon...@googlegroups.com
very nice article. this working fine. but api key problem exist
Reply all
Reply to author
Forward
0 new messages