Loading Google maps in jquery mobile, html5 div


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>
   <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>
/* css styes for the maps */
     #map {
       height: 100%;
     html, body {
       height: 100%;
       margin: 0;
       padding: 0;
<!-- Script for the geolocation, Stack Overflow -->
               $(document).ready(function () {
                   document.addEventListener("deviceready", onDeviceReady, false);
                   function onDeviceReady() {
                       initMap(); //Google map
                       navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
                   // user Current Position
               function displayAndWatch(position) {
               function setCurrentPosition(pos) {
                   var image = 'img/ic_CurrentLocationmap.png';
                   currentPositionMarker = new google.maps.Marker({
                       icon: image,
                       map: map,
                       position: new google.maps.LatLng(
                       title: "Current Location"
                   map.panTo(new google.maps.LatLng(
               function watchCurrentPosition() {
                   var positionTimer = navigator.geolocation.watchPosition(
                       function (position) {
               function setMarkerPosition(marker, position) {
                       new google.maps.LatLng(
                   var center = {
                       lat: position.coords.latitude,
                       lng: position.coords.longitude
               function locError(error) {
                   // the current position could not be located
<!-- 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">
 <div data-role="navbar">
   <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>
  <!-- /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>

  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>
     var map;
     function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap"
  async defer></script>
 <a href="#spoedEisend" class="ui-btn ui-shadow ui-corner-all">Terug</a>
  <!-- /footer -->
       <div data-role="footer">
           <h2>&copy; 2019 Huisartsapp</h2>
   </div><!-- /page -->

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