谷歌地图不加载在ajax

问题描述：

我想放在一起有一个Ajax的Rails应用程序。问题是调用页面加载的ajax部件没有显示Google地图。其他的一切都在页面上，但不是Google地图。谷歌地图不加载在ajax

当我点击刷新时，带有地图的页面会像它应该做的那样加载，但从那时起，当我点击一个链接时，即使页面中的所有内容都存在，地图也会丢失。

包含我的地图的脚本甚至没有加载。我的意思是当我在脚本标签之间放置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); 


});

给我们看ajax代码 – charlietfl 2013-04-21 23:55:03

好的，现在就把它放好。 – CHarris 2013-04-21 23:59:30

尝试使用'load（）'作为ajax，因为'html（）'去掉脚本标签。 'load（）'有一个过滤机制，用于只插入页面的一部分并接受和执行代码。 API文档中更好的解释http://api.jquery.com/load/ – charlietfl 2013-04-22 01:06:07

答

你解决这个问题？我之前有同样的问题（图未通过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＞

我记得谷歌地图需要的宽度和高度

谷歌地图不加载在ajax

相关推荐