2016-08-23 59 views
0

在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,然後地圖加載彈出裏面

enter image description here

+0

要解決這個問題,調試獨立於RoR代碼的JavaScript會很有幫助。你能分享一個HTML/JS生成的樣例來重現這個問題嗎? – bamnet

回答

0

當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");});