时间戳

首页 > 解决方案 > 为什么 Google Maps API 的实际地图没有显示在页面上？

javascript - 为什么 Google Maps API 的实际地图没有显示在页面上？

问题描述

我正在尝试获取一个简单的地图以加载到 HTML 页面上。我看到了所有的导航功能，比如卫星/地图按钮、缩放按钮和街景放置工具，但没有实际的地图正在渲染。关于可能导致短路的任何想法？

我尝试将代码简化为 Google API 文档中最简单的版本，并且尝试了不同的 API 密钥。结果相同。

<style>
  #map {
    height: 400px;
    width: 100%;
    position: absolute;
  }
</style>


<div id="map"></div>

<script>
  function myMap() {
    let mapProp = {
      center: new google.maps.LatLng(51.508742, -0.12085),
      zoom: 5
    };
    let map = new google.maps.Map(document.getElementById('map'), mapProp);
  }
</script>

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

我希望出现一个显示这些坐标的工作地图。而是看到导航功能，如卫星/地图按钮、缩放按钮和街景放置工具，但没有渲染实际地图。

标签： javascripthtmlcss

解决方案

有一些选项可以禁用导航功能，例如卫星/地图按钮缩放这里是一个示例

zoom: 5,        
fullscreenControl: false,
minZoom: 2,
streetViewControl: false,
clickableIcons: false

另见[文档][1]

如果地图未呈现，您必须查看控制台..或分享控制台错误消息以及您所获得的屏幕截图。

这是一个完整的工作代码供您参考，请参阅小提琴https://jsfiddle.net/s39pwz7q/

var myLatLng = new google.maps.LatLng(35.11111,-118.57056);
            var map = new google.maps.Map(document.getElementById("map"),
            {
                zoom: 10,
                center: myLatLng,
             //streetViewControl: false,
            fullscreenControl: false,
            mapTypeControl: false,
                 clickableIcons: false,
                 styles: [
                    {
                      "featureType": "administrative",
                      "elementType": "geometry",
                      "stylers": [
                        {
                          "visibility": "off"
                        }
                      ]
                    },
                    {
                      "featureType": "poi",
                      "stylers": [
                        {
                          "visibility": "off"
                        }
                      ]
                    },
                    {
                      "featureType": "road",
                      "elementType": "labels.icon",
                      "stylers": [
                        {
                          "visibility": "off"
                        }
                      ]
                    },
                    {
                      "featureType": "transit",
                      "stylers": [
                        {
                          "visibility": "off"
                        }
                      ]
                    }
                  ]
            });

            var marker = new google.maps.Marker(
            {
                position: myLatLng,
                map: map,
                title: "California Correctional Institution"
            });

Also there are some options which api does not give option to hide for that you can simply hide using css see below



    <style>
       .gm-style > button.gm-fullscreen-control{
         display:none;
        }
     </style>


  [1]: https://developers.google.com/maps/documentation/javascript/tutorial
  [2]: https://jsfiddle.net/s39pwz7q/

推荐阅读