谷歌地图不完整的负载

我加入jQuery的位置选择器进入自举模式3的含量箱这样的：谷歌地图不完整的负载

HTML：

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a> 

    <div class="modal" id="myModal"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h4 class="modal-title">Modal title</h4> 

       </div> 
       <div class="modal-body">Location: 
        <input type="text" id="us2-address" style="width: 200px" />Radius: 
        <input type="text" id="us2-radius" /> 
        <div id="us2" style="height: 400px;"></div>Lat.: 
        <input type="text" id="us2-lat" />Long.: 
        <input type="text" id="us2-lon" /> 
       </div> 
       <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> 
    <a href="#" class="btn btn-primary" id="save-changes">Save changes</a> 

       </div> 
      </div> 
     </div> 
    </div>

现在，当加载谷歌地图(click in launch modal)无法加载完成了，我看到了它的一部分。

注意：如果调整浏览器地图的窗口大小加载。

见图片：

enter image description here

DEMO：http://jsfiddle.net/Lzv7w/3/

如何解决这一问题？！

来源

2014-07-10 Pink Code

我会尝试使用此代码生成：http://www.bootply.com/solrac/106707 – Aibrean

在哪里'＃myDiv'，然后再将它附加到模态体？ – Blazemonger

@Blazemonger：我从JS中删除'＃myDiv'但没有修复！ http://jsfiddle.net/Lzv7w/5/ –

这里有一个办法：

你初始化地图，告诉你的语气第一次......

小提琴：http://jsfiddle.net/Lzv7w/8/

的js：

var stillPresent = false; 
$('#myModal').on('shown.bs.modal', function (e) { 
     if(stillPresent == false){ 
       $('#us2').locationpicker({ 
      location: { 
       latitude: 46.15242437752303, 
       longitude: 2.7470703125 
      }, 
      radius: 300, 
      inputBinding: { 
       latitudeInput: $('#us2-lat'), 
       longitudeInput: $('#us2-lon'), 
       radiusInput: $('#us2-radius'), 
       locationNameInput: $('#us2-address') 
      } 
     }); 
     stillPresent = true; 
     } 
    })

来源

2014-07-10 15:00:57 pbenard

我面临同样的问题，但加载地图内的选项卡，以解决p roblem必须调用.locationpicker当你点击选项卡，在我这里情况的解决方案：

$("#map_container").click(function() { 
    $('#us3').locationpicker({ 
     location: {latitude: 35.770681, longitude: 10.828099}, 
     radius: 300, 
     inputBinding: { 
      latitudeInput: $('#us3-lat'), 
      longitudeInput: $('#us3-lon'), 
      radiusInput: $('#us3-radius'), 
      locationNameInput: $('#us3-address') 
     }, 
     enableAutocomplete: true, 
     onchanged: function (currentLocation, radius, isMarkerDropped) { 
     } 
    }); 
});

来源

2015-07-13 13:07:50

谷歌地图不完整的负载

回答

相关问题