Question

我正在嵌入谷歌地图的问题，我不明白为什么在加载地图时没有出现并且只在我调整窗口大小时出现，我在stackoverflow中经历了不同的解决方案但是他们没有为我工作。

这是我的js代码：

<script>
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 31.554606, lng: 74.357158},
          zoom: 14
        });
 google.maps.event.addListenerOnce(map, 'idle', function() {
               google.maps.event.trigger(map, 'resize');
            });
         } 
</script>

我的div

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

当我加载应用程序时，它看起来像

在重新调整大小的浏览器窗口后，它看起来非常像这样

请告诉我如何解决这个问题？

Answer 1

当您的＆＃34; div id = map＆＃34;时，请调用google.maps.event.trigger（地图，＆＃39;调整大小＆＃39;）将是可见的。请参阅How do I resize a Google Map with JavaScript after it has loaded?

Answer 2

对我来说没有任何作用。我在Bootstrap中使用Model框来加载地图。我试了好几个小时。每次我加载地图时我都会看到一个灰色的框，但只要我调整浏览器的大小，它就会显示地图。似乎需要调整窗口大小。因此，我将所有地图功能放入一个名为initmap2()的函数中，并在其中显示新的地图。点击后我用了

setTimeout( initMap2, 200 );

因此，只要模态框打开，它就会显示地图，我尝试工作100 milliseconds，但我想它适用于200+ milliseconds所以我只保留500ms安全。

我希望这会有所帮助

Answer 3

我发现只有在结合两件事后才能工作：setTimeout和google resize。

所以，在initMap结束时，我设置了：

google.maps.event.addListener(map, "idle", function(){
  google.maps.event.trigger(map, 'resize'); 
});

为initMap创建一个setTimeout，如下所示：

$(document).ready(function(){
  setTimeout(initMap, 1000);
});

- 修改

回答@LucaC：我的initMap是一个单独的js，我链接到页面。上面的解决方案在这个js中定义（仅限setTimeout）。

但是，过了一段时间，我发现移动设备仍然会出现这个问题。

解决方法：保留initMap的setTimeout，在我加载地图的页面上，我已经设置了

$(window).load(function(){
 setTimeout(function(){
   google.maps.event.trigger(map, "resize");
 }, 250);
});

所以：i）推迟破坏地图的任何事情; ii）最后，在页面加载后调整地图大小：）

Answer 4

对我没有任何帮助。我在引导程序中使用模式框来加载地图。我确实遵循以下代码可能会对您有所帮助

首先，我将地图加载到 body 中，并使用 display：none 如下所示

 <div style="display:none; overflow:hidden; width:100%; height:400px;" id="map"></div>

通过 initMap 方法，地图将正确加载，但我们使用display = none，因此地图不会显示。为了显示模型中的地图，我将具有 id =“ map” 的div附加到模型中的 id =“ map-modal” 。像下面一样

$('#modal-id').on('shown.bs.modal', function () {
    document.getElementById('map').style.display = "";
    var mapNode = map.getDiv();
    $('#map-modal').append(mapNode);
});

希望它能工作。

Answer 5

不使用javascript调整地图大小

步骤1：转到Google地图，然后搜索您的位置，然后点击“共享”并嵌入Google Maps 代码

第2步：代码将如下所示

<iframe src="/" width="600" height="450" frameborder="0" style="border:0" 
allowfullscreen></iframe>

第3步：在嵌入代码周围添加div标签。使用CSS类的地图响应式

<div class="map-responsive">
<iframe src="/" width="600" height="450" frameborder="0" style="border:0" 
allowfullscreen></iframe>
</div>

第4步：添加您的Google Maps CSS

.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}

.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
} 


this will make your map responsive to any screen size.!!

屏幕调整大小后谷歌地图显示？

5 个答案: