Google map ne montre pas en vue partielle

Question

Je travaille sur une application asp.net mvc3.

Je suis en train de charger une carte Google dans une vue partielle, mais il ne fonctionne pas:

Mon vue partielle _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> 

La carte est chargée via un appel 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"); 
       } 
      }); 

le partiel est chargé dans un div nommé contenu

Et dans la con troller Je viens de retourner la vue partielle

return PartialView("_Map"); 

La vue est en cours de chargement mais la carte n'est pas visible.

J'ai utilisé Firebug pour suivre le problème et j'eu cette erreur:

“google is not defined” 

Toute idée sur le problème?

Merci beaucoup

Answer 1

Je résolu ce problème en mettant ce

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

dans la page Mise en page nad pas dans la sous-vue

Answer 2

Vous devez charger la carte google de cette façon:

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

Et vous "carte var réinitialiser" deux fois.

Answer 3

Je ne voulais pas charger les cartes dans une page de mise en page ... Faire cela signifierait que si le script prenait du temps à charger, cela ralentirait la page entière et d'ailleurs, si ce n'est pas nécessaire là-bas, alors pourquoi faire en sorte que le navigateur le télécharge?

Pour contourner cette difficulté, je trouve que vous pouvez charger l'API de cartes dans votre vue partielle comme ceci:

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