在jquery mobile，html5 div中加载谷歌地图答案

【问题标题】：Loading Google maps in jquery mobile, html5 div在jquery mobile，html5 div中加载谷歌地图
【发布时间】：2019-07-28 08:28:43
【问题描述】：

我在 phonegap 构建中执行 google 地图时遇到问题。我的电脑上的浏览器和手机本身都有这个问题。当我将代码隔离开来时，它可以工作并显示地图，但是当我在其余代码中使用它时，似乎什么也没有发生。请帮我解决这个问题。

<!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">
   <br>
   <h3> Huisartsenpraktijk Gideonse en Boekhout </h3>
   <p>Meteorenstraat 4<br>
   2024 RK, Haarlem</p>
   <p>Telefoon<br>
   023 - 525 36 00 </p>
   <p>Keuze 1: Spoed <br>
   Keuze 2: Herhaalrecepten <br>
   Keuze 3: Assistentie</p>
   <br>
  <!-- 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>

【问题讨论】：

标签： html jquery-mobile phonegap

【解决方案1】：

检查您的 API 密钥。
它正在获取ExpiredKeyMapError

https://developers.google.com/maps/documentation/javascript/error-messages#expired-key-map-error

转到-> https://console.cloud.google.com
选择您的项目。
并创建新的 API 密钥并尝试一下。

在添加新的 API 密钥并检查您的样式之后检查溢出样式。

您的代码运行良好，只有 API 密钥是问题所在。

【讨论】：