直到我最小化屏幕，Google地图才显示任何内容 [英] Google Maps shows nothing until i minimize the screen

问题描述

在我的网站上我有一个谷歌地图，但它没有显示我想要的东西。
当它加载时，它显示这个。
然后我最小化我的屏幕并显示地图。

这是我的代码：

 < div id =厂景 > 
<？php 
 $ location = get_field（'locatie_beschrijving'）; 
 if（！empty（$ location））：
？> 
< div id =mapstyle =width：800px; height：300px>< / div> 
< script src ='http：//maps.googleapis.com/maps/api/js？sensor = false'type ='text / javascript'>< / script> 
< script type =text / javascript> 
 //<！[CDATA [
 function load（）{
 var lat =<？php echo $ location ['lat']; ？取代; 
 var lng =<？php echo $ location ['lng']; ？取代; 
 //坐标为latLng 
 var latlng = new google.maps.LatLng（lat，lng）; 
 //地图选项
 var myOptions = {
 zoom：9，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} ; 
 //绘制地图
 var map = new google.maps.Map（document.getElementById（map），myOptions）; 
 var marker = new google.maps.Marker（{
 position：map.getCenter（），
 map：map 
}）; 
} 
 //调用函数
 load（）; 
 //]]> 
< / script> 
< / div> 
  

任何想法有什么不对？

解决方案

关键是您的地图在初始化时隐藏，因此，您需要在显示标签时触发一个调整大小事件。

google.maps.event.trigger（map，resize）;

< blockquote>

当div更改大小时，开发人员应该在地图上触发此事件。

Bootstrap标签

此图书馆暴露事件：

活动

展示时一个新的标签，事件按以下顺序触发：

$ b

hide.bs.tab （在当前活动标签上）

show.bs.tab （在即将显示的标签上）

hidden.bs.tab （在前面（与hide.bs.tab事件相同）

shown.bs.tab （位于新激活的活动标签上刚刚显示的选项卡，与show.bs.tab事件相同）

通过这种方式，您完全可以控制什么与您的标签发生。你知道什么时候显示，隐藏等。

所以你可以使用类似的东西（使用jQuery）：

< $（'code> $（'a [data-toggle =tab]'）。on（'shown.bs.tab'，function（e）{
//触发器映射当显示标签时调整大小
google.maps.event.trigger（map，resize）;
}）;

这会在标签显示时触发resize事件。

确保 map 对象可用于放置此代码的位置。

On my website i have a Google Map but it don´t show the thing i want. When its loaded it shows this. Then i minimize my screen and it shows the map.

This is my code:

<div id="view1"> 
    <?php
        $location = get_field('locatie_beschrijving');
        if( ! empty($location) ):
    ?>
    <div id="map" style="width: 800px; height:300px "></div>
    <script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>
    <script type="text/javascript">
      //<![CDATA[
        function load() {
        var lat = <?php echo $location['lat']; ?>;
        var lng = <?php echo $location['lng']; ?>;
    // coordinates to latLng
        var latlng = new google.maps.LatLng(lat, lng);
    // map Options
        var myOptions = {
        zoom: 9,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
       };
    //draw a map
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map
       });
    }
    // call the function
       load();
    //]]>
    </script>
</div>  

Anyone an idea what's wrong?

解决方案

The key is that your map is hidden when initialized and therefore, you need to trigger a resize event once the tab has been shown.

google.maps.event.trigger(map, "resize");

Developers should trigger this event on the map when the div changes size.

Bootstrap tabs

This library exposes events:

Events

When showing a new tab, the events fire in the following order:

hide.bs.tab (on the current active tab)

show.bs.tab (on the to-be-shown tab)

hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)

shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

This way, you have full control over what happens with your tabs. You know when it's shown, hidden, etc.

So you could use something like that (with jQuery):

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // Trigger map resize when tab is shown
  google.maps.event.trigger(map, "resize");
});

This will trigger the resize event when the tab has been shown.

Make sure the map object is available where you place this code.

这篇关于直到我最小化屏幕，Google地图才显示任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！