Rails 4 google map api in bootstrap popup where google.maps.Marker is not loaded on popup

在rails 4应用程序中，我使用google map API来加载地图。以下是我的js.erb代码，用于在引导弹出窗口中加载地图。Rails 4 google map api in bootstrap popup where google.maps.Marker is not loaded on popup

$('.search_map_modal').empty().append("<%=j render 'business_map', business: business_map %>"); 
$('#modal_<%= business_map.id %>').empty().append("<%=j render 'business_map', business: business_map %>"); 
$('.modal_<%= business_map.id %>').modal(); 
// setTimeout(function(){ 
// $('.modal-backdrop').removeClass('modal-backdrop') 
initShowMap(); 
function initShowMap(){ 
    lat = "<%= business_map.latitude? ? business_map.latitude : '' %>" 
    lngit = "<%= business_map.longitude? ? business_map.longitude : '' %>" 
    if (lat == "" && lngit == ""){ 
    lat = '23.0225' 
    lngit = '72.5714' 
    } 
    var myOptions = { 
    center: new google.maps.LatLng(lat, lngit), 
    zoom: 15 
    }; 
    var map = new google.maps.Map($('#business_map'), myOptions); 
    var marker = new google.maps.Marker({ 
    map: map, 
    draggable:false, 
    position: new google.maps.LatLng(lat, lngit), 
    animation: google.maps.Animation.DROP, 
    anchorPoint: new google.maps.Point(0, -29) 
    }); 
}

以下是我的部分business_map

<div class="modal fade modal_<%= business.id %> padding-top-60 map_modal" role="dialog"> 
    <div class="vertical-alignment-helper"> 
    <div class="modal-dialog modal-lg vertical-align-center"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title"><%= business.try(:name) %></h4> 
     </div> 
     <div class="modal-body"> 
      <%= "#{business.city.try(:name)}, #{business.state.try(:name)}, #{business.try(:zipcode).try(:code)}" %> 
      <%= hidden_field_tag 'business_latitude', business.latitude %> 
      <%= hidden_field_tag 'business_longitude', business.longitude %> 
      <%= hidden_field_tag 'business_google_location', business.google_location%> 
      <%= hidden_field_tag 'radius','',:class=>"form-control radius_val",:id => "business_radius" %> 
      <div id="business_map"></div> 
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYVXvVsVO_zdrScObnfrUH1Cu-HLx8BEA&libraries=places&callback=initShowMap" 
      async defer></script> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal"> 
      Close 
      </button> 
     </div> 
     </div> 
    </div> 
    </div> 
    </div>

但是当我重装屏幕google.maps.Map后打开弹出冷杉时间加载，但google.maps.Marker没有在侧面装载弹出。这只是灰色框，在里面没有地图，你可以看到它在下面的图片

当我点击F12，然后地图加载弹出里面

来源

2016-08-23 urjit on rails

要解决这个问题，调试独立于RoR代码的JavaScript会很有帮助。你能分享一个HTML/JS生成的样例来重现这个问题吗？ – bamnet

当MAP一些元素内部使用这通常发生使用jQuery（模态，手风琴等）进行控制。尝试在$(document).ready()内部插入google.maps.event.trigger(map, "resize");，或者最好是在加载模式时运行的函数。编辑：我认为它可能看起来像这样： $("#modal_<%= business_map.id %>").on("shown.bs.modal", function(){ google.maps.event.trigger(map, "resize");});

来源

2016-08-23 16:35:30

Rails 4 google map api in bootstrap popup where google.maps.Marker is not loaded on popup

回答

相关问题