Google Apis Map on my cordova jquery app doesn't work

Question

I'm using cordova with jquery mobile. When I try to insert Maps of google Maps Apis, the maps doesn't appear. I have not understood the problem yet. My code(api key removed):

    <div id="mappagps">Cavolo</div>
<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById("mappagps"), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>
<script src="js/my_geoloc.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key= *your_api_key* "></script>

And in the last raw of index.html I put: initMap()

Answer 1

You have forgotten to set the callback for the google map script to call when he's finished: add &callback=initMap at the end of your google map script. (and also forgotten to give your div dimensions as said in Hasta Tamang's comment)

 <div id="mappagps" style="width: 100px; height: 100px">Cavolo</div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById("mappagps"), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> <!-- commented because we don't have this file: <script src="js/my_geoloc.js"></script>--> <script src="https://maps.googleapis.com/maps/api/js?key= *your_api_key *&callback=initMap"></script>