科尔多瓦＆jQuery Mobile Google Maps not loading

Question

I have an application where I use the google maps api, first it was working perfectly now the map is not loaded as it should. I tried to implement this: LINK

But when I change something and build it to my phone it suddenly shows only a gray area.

Here is my code how it worked first:

<div data-role="page" id="map">
   <div data-role="header">
     <a href="#dashboard" class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-alt-icon ui-corner-all ui-btn-left" data-transition="slide" data-direction="reverse">No text</a>
     <h1>Plattegrond</h1>
</div>

<div id="map-canvas"></div>

  <select id="type" onchange="filterMarkers(this.value);">
    <option value="">Please select category</option>
    <option value="restaurant">restaurant</option>
    <option value="shopping">shopping</option>
    <option value="toilet">toilet</option>
  </select>
</div>

and here the javascript code:

 $(document).on("pagebeforeshow","#map",function(){   
        function initialize() {
            var center = new google.maps.LatLng(51.458391, 5.391632);
            var mapOptions = {
                zoom: 18,
                center: center,
                mapTypeId: 'roadmap',
                styles: myStyles
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            for (i = 0; i < markers1.length; i++) {
                addMarker(markers1[i]);
            }
        }       

        // Init map
        initialize();
    });

Than I stripped the code down and uses the code from the link where I refer to I really don't get it why it is not loading or showing. I implemented the google api link below my local js at the bottom of html like this:

<script type="text/javascript" src="js/index.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZZcdBQRqmJEzM1s3VmBh96Bw4dKQhoAU"></script>

If I run in browser the first time the map is not showing but when I refresh it is showing... Pretty weird but how can I make it show for first time on mobile?

Answer 1

尝试将此CSP meta添加到索引页面或安装白名单插件：

<meta http-equiv="Content-Security-Policy" content="img-src 'self' * default-src * gap://ready file:; style-src 'self' 'unsafe-inline'; 'self' data:; script-src 'self' * 'unsafe-inline' 'unsafe-eval' http://maps.google.com https://maps.google.com http://maps.googleapis.com https://maps.googleapis.com">