Google map не загружается в ajax

Question

Я пытаюсь собрать приложение Rails, которое имеет немного ajax. Проблема в том, что части ajax, которые вызывают загрузку страницы, не отображают карты Google. Все остальное находится на странице, но не карты Google.

Когда я нажимаю кнопку «Обновить», страница с картами загружается так, как должна, но с тех пор, когда я нажимаю на ссылку, карты отсутствуют - хотя все остальное на странице есть.

Сценарий, содержащий мою карту, даже не загружается. Я имею в виду, когда я добавляю console.log («привет») между тегами скрипта, «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

ли вы решить эту проблему? У меня такая же проблема (карта не показывать на АЯКС страницу загрузки) перед , но моя проблема в том, что я не даю правильный широты и LNG

может быть, вы убедитесь, что значение прав на код

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＞

Я помню Google Map нужно ширина и высота