谷歌地圖不加載在ajax

Question

我想放在一起有一個Ajax的Rails應用程序。問題是調用頁面加載的ajax部件沒有顯示Google地圖。其他的一切都在頁面上，但不是Google地圖。

當我點擊刷新時，帶有地圖的頁面會像它應該做的那樣加載，但從那時起，當我點擊一個鏈接時，即使頁面中的所有內容都存在，地圖也會丟失。

包含我的地圖的腳本甚至沒有加載。我的意思是當我在腳本標籤之間放置console.log（「hello」）時，'hello'不會出現在我的控制檯中。它在我刷新頁面時顯示，但在使用ajax鏈接時不顯示。

有沒有人知道爲什麼，或有一些代碼來幫助我？我試過：

$(document).ready(function(){ 
google.maps.event.trigger(map, 'resize'); 
}); 

在我的show.html.erb的頂部，但無法讓它工作。如果它的任何幫助，我的地圖腳本代碼：

<div id="map_canvas"> 


<script type="text/javascript"> 
console.log("hello") 
    var map; 
    var markers = []; 

    function initialize_google_maps() { 
    var currentlatlng = new google.maps.LatLng(<%= @user.lat %>, <%= @user.lng %>); 
    var zoom = <%= @kms_range %> > 9 ? 9 : 10; 
    var myOptions = { 
     zoom: zoom, 
     center: currentlatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID 
     streetViewControl: false 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var marker = new google.maps.Marker({map: map, position: currentlatlng, icon:{oppacity:0}}); 
    map.setCenter(currentlatlng); 
    map.setZoom(zoom); 

    var circle = new google.maps.Circle({ 
     map: map, 
     fillOpacity: 0, 
     strokeWeight: 2, 
     strokeOpacity: 0.7, 
     radius: <%= @kms_range %>*1000, 
    }); 
    circle.bindTo('center', marker, 'position'); 

    } 

    function show_markers() { 
    if (markers) 
     for(i in markers) { 
     markers[i].setMap(map); 
     } 
    } 

    function add_marker(location) { 
    marker = new google.maps.Marker({ 
     position: location, 
     map: map 
    }); 
    markers.push(marker); 
    // markers.setVisible(false); 
    } 

    function initialize_markers() { 
    <% (@reviews || []).each do |r| %> 
     <% next unless r.lat && r.lng %> 
     position = new google.maps.LatLng(<%= r.lat %>, <%= r.lng %>); 
     add_marker(position); 
    <% end %> 
    } 

    $(function() { 
    initialize_google_maps(); 
    initialize_markers(); 
    show_markers(); 
    }); 

</script> 

    </div> 

我的Ajax代碼是：

$(document).on("ready", function(){ 

    var ajax_loaded = (function(response) {    

     $(".page-content") 

      .html($(response).filter(".page-content"));    

     $(".page-content .ajax").on("click",ajax_load); 


}); 

var form_submit = (function(e) {      
    e.preventDefault();        

    var url = $(this).attr("action");    
    var method = $(this).attr("method");    


    var data = {}         
    $(this).find("input, textarea, select").each(function(i){ 
     var name = $(this).attr("name");    
     var value = $(this).val();     

     data[name] =value;       

    }); 

    $.ajax({           
     "url": url,         
     "type": method,        
     "data": data,        
     "success": ajax_loaded, 
     "error": function() {alert("bad");}   
    }); 
}); 


var history = [];         

var current_url_method;        

var ajax_load = (function(e) {      
    e.preventDefault();        


    history.push(this);        

    var url =$(this).attr("href");     
    var method = $(this).attr("data-method");  

    if (current_url_method != url + method) {  
     current_url_method = url + method;   

     $.ajax({          
      "url": url,        
      "type": method,       
      "success": ajax_loaded,     
     }); 
    } 
}); 

$("#menu a").on("click",ajax_load); 

$("#menu a.main").trigger("click"); 
$(".search-box form").on("submit", form_submit); 


}); 

Answer 1

你解決這個問題？ 我 之前有同樣的問題（圖未通過AJAX加載頁面顯示），但我的問題是，因爲我不給正確的緯度和經度

也許你會確保價值就在您的代碼

var myOptions = { 
     zoom: zoom,<br> 
     center: currentlatlng,<br> 
     mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID<br> 
     streetViewControl: false<br> 
    }; 

和

設置你的div寬度和高度一樣＜div id="map_canvas" style＝＂width:800px＂ height:450px"＞＜／div＞

我記得谷歌地圖需要的寬度和高度