Grey Google Maps On Intel XDK using jQuery Mobile

Question

Hi im working with Intel XDK and jQuery mobile to develop and apk for tourism for that i need to display google maps with some markers and info box. The problem that i have is when i load the apk on emulator or real device the screen where the map should display go full grey. like the screen bellow.

here is my code:

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <div class="upage bg_que_ver" id="mapa" data-role="page" data-url="mapa">
            <div data-role="header" data-theme="b">
        <h1>Maps</h1>
        </div>
        <div id="map" style="width: 100%; height: 95%;"></div>
        <script type="text/javascript">
            var map; //<-- This is now available to both event listeners and the initialize() function
            function initialize() {
            var mapOptions = {
            center: new google.maps.LatLng(40.5472,12.282715),
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
            }
            google.maps.event.addDomListener(window, 'load', initialize);
            google.maps.event.addDomListener(window, "resize", function() {
            var center = map.getCenter();
            google.maps.event.trigger(map, "resize");
            map.setCenter(center); 
            });
        </script>       
 </div>

Answer 1

Make sure you registered the correct key(s) and package names with the Google API console. Specifically, if you are compiling and launching directly from Android Studio, you are probably signing in debug mode. If so, you need to add your debug key hash + package name to the allowed applications in the API console.

You can also check this related SO question: Android app google maps showing grey tiles and not map!