谷歌地图首先加载灰色，然后在调整大小时加载图像？答案

【问题标题】：google map first load gray and when resized it load the images?谷歌地图首先加载灰色，然后在调整大小时加载图像？
【发布时间】：2016-02-24 03:22:30
【问题描述】：

基本上这就是我在文章上加载地图的问题，它加载了谷歌徽标、条件文本和光标变为手形。问题是图像没有加载，但是当我调整页面大小时，图像加载正常，这是我使用的脚本：

jQuery(document).ready(function($) {
    function success(position) {
      var mapcanvas = document.createElement('div');
      mapcanvas.id = 'mapcontainer';
      mapcanvas.style.height = '400px';
      mapcanvas.style.width = '100%';

      document.querySelector('article').appendChild(mapcanvas);

      var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      var options = {
        zoom: 15,
        center: coords,
        mapTypeControl: false,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

      var marker = new google.maps.Marker({
          position: coords,
          map: map,
          title:"You are here!"
      });
    }

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success);
    } else {
      error('Geo Location is not supported');
    }

});

这是 HTML

<div class="col-xs-12 info">

    ---some text---

    <button class="btn btn-warning continueCasual">Continue</button>

</div>
<div class="col-xs-12 formPub">
    --some inputs
    <article id="">

    </article>
</div>

显示地图所在的 div 的代码：

$('.continueCasual').on('click',function(event){
    $('.info')hide('fast', function(){  
            $('.formPub').show('fast');
    });
})

如果地图加载到隐藏元素之外，则地图加载完美，当地图加载到隐藏元素内，然后显示地图加载灰色

可能是什么问题，我该如何解决？

注意

地图在用户进行某些操作后被隐藏，我在一个新文档中进行了测试，它显示了地图，当我隐藏它然后显示它时，问题就发生了。

【问题讨论】：

牵强，但是，px 宽度而不是 % 可能会有所帮助。
即使我使用 px，问题仍然存在。
您的代码唯一的问题是地理定位代码无法运行。你是如何隐藏和展示它的？请提供一个 Minimal, Complete, Tested and Readable example 来证明您的问题。
所以地图在页面加载时隐藏了？这确实会导致地图加载问题。地图又被隐藏了？地图的确切交互和可见性是什么？
地图在页面加载时隐藏，然后可见，不再隐藏

标签： javascript jquery google-maps

【解决方案1】：

在初始化地图之前，你必须先定义这个 div，而不是用 jquery 创建 div

<div id = 'mapcontainer' style ="height: 400px; width: 500px;" ></div>

只留下

jQuery(document).ready(function($) {
    function success(position) {

    var coords = new google.maps.LatLng(position.coords.latitude, 
            position.coords.longitude);
   .......

【讨论】：

问题依旧，地图不显示再显示时出现问题。