Google地图不显示？ Cordova插件

Question

I have followed the following link instructions just test that a map is appearing. So I got to stage 4 where the map should be displayed, however I am not getting anything. ( http://www.christianengvall.se/phonegap-and-google-maps/ )

I have added all the references for the JS and CSS files, as well as installing the google map plugin.

I changed the function ondeviceready as I am already using this function for other code, so instead the map should initialize when the submit button is clicked. The reason for this is because I keep all my JavaScript outside the HTML page and on a specific JS file.

So at the moment, when i clicked the button, nothing is happening. Can anyone see where I am going wrong?

HTML:

<div data-role="page" id="map" data-theme="d">
<div data-role="content">
    <input type="submit" value="View Map" onclick="return mapAPI()">
<div id="map_canvas">
</div>
    </div>

mapAPI function:

function mapAPI(){
var map = new GoogleMap();
map.initialize();

}

googlemap.js:

function GoogleMap(){
  this.initialize = function(){
   var map = showMap();
 }
  var showMap = function(){
  var mapOptions = {
   zoom: 4,
   center: new google.maps.LatLng(-33, 151),
  mapTypeId: google.maps.MapTypeId.ROADMAP
   }
 var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
return map;
}

}

Answer 1

Attach an event listener to the button instead.

<input type="submit" id="viewMap" value="View Map">

<script>
    google.maps.event.addDomListener(document.getElementById('viewMap'), 'click', mapAPI);
</script>

Answer 2

Hi Are you whitelisting the URL in the Head section of the index.html. If not , this is how you do it .

  <meta charset="utf-8" />

  <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'">

A simple way to show googlemaps on the mobile using Cordova

<script type="text/javascript">
    function initialize() {
      var mapOptions = {
        zoom: 14,
        center: new google.maps.LatLng(-33, 151),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map'), mapOptions);
    }



</script>

You need API KEY for Googlemaps to work , Generate one and put the reference head section

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>