将谷歌地图添加到我的网站

Question

我有一个页面，我试图将谷歌地图添加到其中，但它没有出现在页面中，它在控制台日志中没有错误，但它没有出现在我的页面中，这是我的代码：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD19cqU2rIzBHOPL_t8GhJJ9cmi-HNpULg"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script>
            function initialize() {
              var mapOptions = {
                zoom: 15,
                scrollwheel: false,
                center: new google.maps.LatLng((31.993072, 35.862211))
              };
              var map = new google.maps.Map(document.getElementById('googleMap'),
                  mapOptions);

              var marker = new google.maps.Marker({
                position: map.getCenter(),
                animation:google.maps.Animation.BOUNCE,
                icon: 'img/map-marker.png',
                map: map
              });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>

Answer 1

执行以下操作

1. 在 SRC <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD19cqU2rIzBHOPL_t8GhJJ9cmi-HNpULg&callback=initialize"></script>中添加回调
2. center:new google.maps.LatLng(31.993072, 35.862211)而不是center: new google.maps.LatLng((31.993072, 35.862211))移除多余的圆括号

function initialize() {
  var mapOptions = {
    zoom: 15,
    scrollwheel: false,
    center: new google.maps.LatLng(31.993072, 35.862211)
  };
  var map = new google.maps.Map(document.getElementById('googleMap'),
    mapOptions);
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    animation: google.maps.Animation.BOUNCE,
    //icon: 'img/map-marker.png',
    map: map
  });
}

#googleMap {
  height: 400px;
  width: 100%;
}

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD19cqU2rIzBHOPL_t8GhJJ9cmi-HNpULg&callback=initialize"></script>
<div id="googleMap">
</div>

Answer 2

请注意，谷歌地图的特定键仅适用于特定域，因此如果您在本地主机上运行，它将无法正常显示地图。

Answer 3

使用 iframe 在您的网站上显示地图：

<iframe  width="600"  height="450"  frameborder="0" style="border:0"  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>

谷歌地图嵌入API链接