Loading Google maps in jquery mobile, html5 div

Hi,

I’m having a problem with the implementation of google maps within my phonegap build. I have this problem in the browser on my pc and on the Phone itself. When I have the code in isolation it works and shows a map but when I have it within the rest of the code nothing seem te happen. Please help me with this.

<!doctype html>
<html>
<head>
   <title>Huisartspraktijk app</title>
<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- /jquery links en scripts. NIET VERWIJDEREN!! -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<style>
/* css styes for the maps */
     #map {
       height: 100%;
     }
     html, body {
       height: 100%;
       margin: 0;
       padding: 0;
     }
   </style>
<!-- Script for the geolocation, Stack Overflow -->
<script>
               $(document).ready(function () {
                   document.addEventListener("deviceready", onDeviceReady, false);
                   function onDeviceReady() {
                       //onDeviceReaddy
                       initMap(); //Google map
                       navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
                   }
                   // user Current Position
               function displayAndWatch(position) {
                   setCurrentPosition(position);
                   watchCurrentPosition();
               }
               function setCurrentPosition(pos) {
                   var image = 'img/ic_CurrentLocationmap.png';
                   currentPositionMarker = new google.maps.Marker({
                       icon: image,
                       map: map,
                       position: new google.maps.LatLng(
                           pos.coords.latitude,
                           pos.coords.longitude
                       ),
                       title: "Current Location"
                   });
                   map.panTo(new google.maps.LatLng(
                       pos.coords.latitude,
                       pos.coords.longitude
                   ));
               }
               function watchCurrentPosition() {
                   var positionTimer = navigator.geolocation.watchPosition(
                       function (position) {
                           setMarkerPosition(
                               currentPositionMarker,
                               position
                           );
                       });
               }
               function setMarkerPosition(marker, position) {
                   marker.setPosition(
                       new google.maps.LatLng(
                           position.coords.latitude,
                           position.coords.longitude)
                   );
                   var center = {
                       lat: position.coords.latitude,
                       lng: position.coords.longitude
                   }
                   map.setCenter(center);
               }
               function locError(error) {
                   // the current position could not be located
               }
               });
</script>
</head>
<body>
<!-- The mobile page in html5, within this page there is a DIV containing the Java Script to summon google maps -->
<div data-role="page" id="mobiel">
<!-- /header -->
        <div data-role="header">
           <h1>SPOED</h1>
 <div data-role="navbar">
  <ul>
   <li><a href="#main">Mainpage</a></li>
   <li><a href="#chat">Chat met de arts</a></li>
   <li><a href="#consult">Consultaanvraag</a></li>
   <li><a href="#doorverwijzing">Doorverwijzing</a></li>
   <li><a href="#bloedonderzoek">Bloedonderzoek</a></li>
   <li><a href="#berichten">Berichten</a></li>
   <li><a href="#epd">EPD</a></li>
   <li><a href="#medicijnen">Mijn medicijnen</a></li>
  </ul>
 </div>
       </div>
  <!-- /content -->
       <div role="main" class="ui-content" align="center">
 <h2> "Ga naar deze medische post. Men is op de hoogte van uw komst" </h2>
 <div style="background-color: lightyellow">
  

  <h3> Huisartsenpraktijk Gideonse en Boekhout </h3>
  <p>Meteorenstraat 4

  2024 RK, Haarlem</p>
  <p>Telefoon

  023 - 525 36 00 </p>
  <p>Keuze 1: Spoed 

  Keuze 2: Herhaalrecepten 

  Keuze 3: Assistentie</p>
  

 <!-- In this DIV you will find a small Java Script for summoning Google maps. But some how it won't work, Google maps won't show within this DIV. -->
  <div id="map"></div>
   <script>
     var map;
     function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
     }
   </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap"
  async defer></script>
 </div>
 <a href="#spoedEisend" class="ui-btn ui-shadow ui-corner-all">Terug</a>
</div>
  <!-- /footer -->
       <div data-role="footer">
           <h2>&copy; 2019 Huisartsapp</h2>
       </div>
   </div><!-- /page -->
</body>
</html>

Can’t do  much with this, as I don’t have the JS files. But, I do get an “expired key” error:

js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap:55 Google Maps JavaScript API error: ExpiredKeyMapError

test chang utf to utc and save data maybe ok