谷歌地图未加载且控制台中没有错误[关闭]答案

【问题标题】：Google Map not loading and no error in console [closed]谷歌地图未加载且控制台中没有错误[关闭]
【发布时间】：2021-10-27 13:06:43
【问题描述】：

我已经像往常一样设置了我的 js 并调用了 API 函数，但地图没有加载，控制台也没有显示任何错误。我错过了什么吗？我的过程是；我首先从数据库中收集数据并将其保存在 JSON 中，然后在我的地图初始化中使用。

js代码

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBs3ZgNgivnZz7TmyCBlW-2B09mHGKrO_g" async></script>
<?php
/* lat/lng data will be added to this array */
$locations = array();
$findcluster = selectAll('input_cluster');
foreach ($findcluster as $cluster) {

    $nama_kabkot = $cluster['Name_of_cluster_Area'];
    $longitude = $cluster['Longitude'];
    $latitude = $cluster['Latitude'];

    /* Each row is added as a new array */
    $locations[] = array('name' => $nama_kabkot, 'lat' => $latitude, 'lng' => $longitude);
}
/* Convert data to json */
$markers = json_encode($locations);
?>
<script type='text/javascript'>
    <?php
    echo "var markers=$markers;\n";

    ?>

    function initMap() {

        var latlng = new google.maps.LatLng(-33.92, 151.25);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };

        var map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
        var infowindow = new google.maps.InfoWindow(),
            marker, lat, lng;
        var json = JSON.parse(markers);

        for (var o in json) {

            lat = json[o].lat;
            lng = json[o].lng;
            name = json[o].name;

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                name: name,
                map: map
            });
            google.maps.event.addListener(marker, 'click', function(e) {
                infowindow.setContent(this.name);
                infowindow.open(map, this);
            }.bind(marker));
        }
    }
</script>

还有我的 div 标签

 <style>
                #mapCanvas {
                    width: 100%;
                    height:500px; 
                    margin: 0; 
                    padding: 0;
                }
            </style>
            <div class="card-body">
                
                    <canvas id="mapCanvas"></canvas>
                
            </div>

【问题讨论】：

在 initMap 函数内的不同位置放置一些 console.log，看看它是否 a) 被调用，并且 b) 做任何事情
mapCanvas 元素必须是 <div> 而不是 <canvas>
@geocodezip 这不是我尝试过的问题，也不是。尝试了下面发布的答案，我切换了 API 密钥，但它工作并停止了，这意味着最初的问题是 API 密钥，我没有任何东西可以与之比较。
请提供证明您的问题的minimal reproducible example，最好是证明问题的StackSnippet。 <canvas> 与 <div> 是一个问题。
那么，在你的测试时间里，initMap 会被调用吗？我觉得我问的很明显

标签： javascript php api google-maps

【解决方案1】：

mapCanvas 元素必须是 <div> 而不是 <canvas>

proof of concept fiddle

function initMap() {
  var latlng = new google.maps.LatLng(-33.92, 151.25);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  };
  var map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
  var infowindow = new google.maps.InfoWindow(),
    marker, lat, lng;
  var json = JSON.parse(markers);
  for (var o in json) {
    lat = json[o].lat;
    lng = json[o].lng;
    name = json[o].name;
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      name: name,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function(e) {
      infowindow.setContent(this.name);
      infowindow.open(map, this);
    }.bind(marker));
  }
}

#mapCanvas {
  width: 100%;
  height: 500px;
  margin: 0;
  padding: 0;
}
/* Optional: Makes the sample page fill the window. */
html,
body, .card-body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div class="card-body">
      <div id="mapCanvas"></div>
    </div>
    <div id="map"></div>
    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly&channel=2" async></script>
  </body>
</html>

【讨论】：