Google map не отображается с частичным видом

Question

Я работаю над приложением asp.net mvc3.

Я пытаюсь загрузить карту Google внутри частичный вид, но он не работает:

Мой частичный вид _Map.cshtml

<style type="text/css"> 
    #map_canvas 
    { 
     position:absolute; 
     top:40px; 
     left:12px; 
     width:576px; 
     height: 450px; 
    } 

</style> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<div class="sTitle">Name</div> 

<div id="map_canvas"></div> 


<script type="text/javascript"> 
var map; 
$(document).ready(function() { 
    var map; 
    var myOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(-34.397, 150.644), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), 
     myOptions); 

    google.maps.event.addDomListener(window, 'load', initialize); 
}); 

</script> 

Карта загружается через вызов AJAX:

  $.ajax({ 
       type: 'GET', 
       url: '@Url.Action("GetMapById", "Map")', 
       data: { 'id': sId }, 
       success: function (html) { 
        $("#content").html(html); 
       }, 
       complete: function() { 
       }, 
       error: function() { 
        alert("There was an error opening the Map. Please try again or contact an administrator"); 
       } 
      }); 

парциальное загружается в DIV с именем Content

И кондитер troller Я только что вернул Partial View

return PartialView("_Map"); 

Вид загружается, но карта не отображается.

Я использовал Firebug для отслеживания проблемы и я получил эту ошибку:

“google is not defined” 

Любая идея о проблеме?

Большое спасибо

Answer 1

Я решил эту проблему, поставив этот

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 

в макет страницы-над не в подвид

Answer 2

Вы должны загрузить карту Google таким образом:

<script type="text/javascript"> 
    var map; 
    google.load("maps", "3", { other_params:"sensor=false" }); 
    $(document).ready(function() { 

И переинициализировать "Var карта" два раза.

Answer 3

Я не хочу, чтобы загрузить карты на странице Макет ... Делать это будет означать, что, если сценарий занимает много времени для загрузки, это замедлит всю страницу, и, кроме того, если она не нужна там, то зачем браузеру загружать ее?

Чтобы обойти это, я обнаружил, что вы можете загрузить карты API в вашей частичное представление, как это:

$.getScript('http://maps.googleapis.com/maps/api/js',function(){ 
    google.maps.event.addDomListener(window, 'load', initialize); 
});