Javascript 谷歌地图先加载灰色，调整大小后再加载图像？

基本上，这就是我在一篇文章中加载地图时遇到的问题，它加载了谷歌徽标、条件文本和光标。问题是图像不会加载，但当我调整页面大小时，图像会正常加载，这是我使用的脚本：

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，而不是使用jquery创建div

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

---

在初始化映射之前，必须先定义此div，而不是使用jquery创建div

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

---

虽然牵强，但是，px width而不是%可能会有所帮助。即使我使用px，问题仍然存在。我对您的代码的唯一问题是地理位置代码没有运行。你是如何隐藏和展示它的？请提供一个示例来说明您的问题。那么地图在页面加载时隐藏了吗？这确实会导致地图加载问题。地图又被隐藏了吗？地图的确切交互和可见性是什么？地图在页面加载时是隐藏的，然后在获取后是可见的，而不是隐藏的，但是，px宽度而不是%可能会有所帮助。即使我使用px，问题仍然存在。我对您的代码唯一的问题是地理位置代码没有运行。你是如何隐藏和展示它的？请提供一个示例来说明您的问题。那么地图在页面加载时隐藏了吗？这确实会导致地图加载问题。地图又被隐藏了吗？地图的确切交互作用和可见性是什么？地图在页面加载时隐藏，然后在问题持续存在时，地图不显示然后再显示时，问题发生。问题持续存在，当地图不显示然后再显示时，问题发生。

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

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