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

执行以下操作

在src <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD19cqU2rIzBHOPL_t8GhJJ9cmi-HNpULg&callback=initialize"></script>
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

请注意，Google地图的特定密钥仅适用于特定域，因此如果您在localhost上运行，它将无法正常显示地图。

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>

Google Maps Embed API Link

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

3 个答案: