Google Maps JS API / GeoJSON 导入 - 插入 API 键时信息窗口不显示

Question

这里是一些从 geoJson 变量获取数据的简单地图代码。我的问题是与标记关联的信息窗口不会显示。奇怪的是，如果我删除 API 关键脚本，一切似乎都能正常工作。

<!DOCTYPE html>
<html>
<head>
<title>Google Maps geoJson infowindow test</title>
<style type="text/css">
html, body, #map-canvas {
    width: 100%;
    height: 500px;
    margin: 0px;
    padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=drawing"></script>
<script type="text/javascript">
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();

function initialize() {
    // Create a simple map.
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 14,
        center: new google.maps.LatLng(-27.779627,153.236112)
    });
    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });

    // Load the associated GeoJSON
 var data = {
   "type": "FeatureCollection",
   "features": [
    {
     "type": "Feature",
     "geometry": {
      "type": "Point",
      "coordinates": [153.236112, -27.779627]
     },
     "properties": {
      "name": "[153.236112, -27.779627]",
      "description": "Timestamp: 16:37:16.293"
     }
    },
    {
     "type": "Feature",
     "geometry": {
      "type": "Point",
      "coordinates": [153.230447, -27.777501]
     },
     "properties": {
      "name": "[153.230447, -27.777501]",
      "description": "Timestamp: 16:37:26.298"
     }
    }
   ]
  }
 map.data.addGeoJson(data)

  // Set mouseover event for each feature.
  map.data.addListener('click', function(event) {
     infowindow.setContent(event.feature.getProperty('name')+"<br>"+event.feature.getProperty('description'));
     infowindow.setPosition(event.latLng);
     infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
     infowindow.open(map);
  });

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
<div id="content"></div>
    <table border="1"> 
      <tr> 
        <td> 
<div id="map-canvas" style="width:580px;height:620px;"></div>
        </td> 
        <td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;"> 
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table> 
<div id="info"></div>
</script> 
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=MY_SECRET_KEY&callback=initialize">
    </script>
</body>
</html>

要删除的代码以使其在本地运行：

        <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=MY_SECRET_KEY&callback=initialize">
        </script>

需要一些建议。谢谢。

Answer 1

您包含了 API 两次，一次是在绘图库中，一次是在回调函数中。仅包含 API 一次，按照文档中的描述组合所有参数（包括您的 API 键）。

代码片段：

    var map;
    var marker;
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();

    function initialize() {
      // Create a simple map.
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 14,
        center: new google.maps.LatLng(-27.779627, 153.236112)
      });
      google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
      });

      // Load the associated GeoJSON
      var data = {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [153.236112, -27.779627]
          },
          "properties": {
            "name": "[153.236112, -27.779627]",
            "description": "Timestamp: 16:37:16.293"
          }
        }, {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [153.230447, -27.777501]
          },
          "properties": {
            "name": "[153.230447, -27.777501]",
            "description": "Timestamp: 16:37:26.298"
          }
        }]
      }
      map.data.addGeoJson(data)

      // Set mouseover event for each feature.
      map.data.addListener('click', function(event) {
        infowindow.setContent(event.feature.getProperty('name') + "<br>" + event.feature.getProperty('description'));
        infowindow.setPosition(event.latLng);
        infowindow.setOptions({
          pixelOffset: new google.maps.Size(0, -34)
        });
        infowindow.open(map);
      });

    }
    google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  width: 100%;
  height: 500px;
  margin: 0px;
  padding: 0px
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initialize&libraries=drawing"></script>
<div id="content"></div>
<table border="1">
  <tr>
    <td>
      <div id="map-canvas" style="width:580px;height:620px;"></div>
    </td>
    <td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">
      <div id="side_bar"></div>
    </td>
  </tr>
</table>
<div id="info"></div>

Google Maps JS API / GeoJSON 导入 - 插入 API 键时信息窗口不显示

Google Maps JS API / GeoJSON import - infowindows not showing up when API Key is inserted

javascript

google-maps

key

geojson

infowindow