Question

我不是导致这个问题的原因，即使它正在加载，我也无法看到谷歌mp。正在加载jQuery，也正在加载引导类。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places,geometry&callback=initMap"></script>

<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 14.5800, lng: 121.0000}
  });
}

</script>

<div id="map" style="height:450px;width:100%;"></div>

这就是我的地图显示方式。

Answer 1

我经历过类似的事情，因为我在显示和隐藏它的按钮上有地图（引导崩溃动作）。我是如何解决的：尝试在没有任何容器的情况下显示地图，如果这样做，请检查您使用的地图的容器。似乎Google地图加载受到＆＃34;崩溃＆＃34; bootstrap的动作。当我加载地图而没有崩溃动作时，它的工作原理就是问题是你的地图在＆＃34;不活跃＆＃34;或者＆＃34;没有显示＆＃34;状态和地图没有正确加载。我的地图功能代码：

google.maps.event.addDomListener(window, 'load', initMap);
function initMap(){
  var mapDiv = document.getElementById('map');
  var map = new google.maps.Map(mapDiv, {
    center: {lat: 4.619870, lng: -74.067577},
    zoom: 16});
    var mainmarker = new google.maps.Marker({ //Line 1
      position: {lat: 4.619870, lng: -74.067577}, //Line2: Location to be highlighted
      map: map,//Line 3: Reference to map object
      title: 'Casa de Bolsa', //Line 4: Title to be given
      icon : 'images/pin.png'
    });
    //console.log("map ready");
    return map;
  };

Answer 2

似乎只是元素的错误顺序尝试这种方式（并检查是否有效地需要传感器..）

<!DOCTYPE html >
 <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>PHP/MySQL & Google Maps Example</title>
</head>
<body>

<div id="map" style="height:450px;width:100%;"></div>

<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 14.5800, lng: 121.0000}
  });
}

</script>

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places,geometry&callback=initMap"></script>
</body>

Answer 3

试试这个，

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 14.5800, lng: 121.0000}
  });
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>

<div id="map" style="height:450px;width:100%;"></div>

标准方式参考 - http://www.w3schools.com/googleapi/google_maps_basic.asp

Answer 4

脚本在函数之前定义，因此无法找到它。您可以使用async defer。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places,geometry&callback=initMap" async defer></script>

Google地图加载但未显示

4 个答案: