Google map not showing in partial view - asp.net-mvc-3

Question

i am working on an asp.net mvc3 application.
I am trying to load a google map inside a partial view but it is not working:
My partial view _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>
The map is loaded Via an AJAX Call:
$.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");
}
});
The partial is loaded in a div named Content
And in the controller I just return the Partial View
return PartialView("_Map");
The View is loading but the map is not visible.
I used Firebug to track the problem and I got this error:
“google is not defined”
Any idea about the problem?
Thanks a lot

Answer 1

I solved this by putting this
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
in the Layout page nad not in the subview

Answer 2

You have to load google map in this way:
<script type="text/javascript">
var map;
google.load("maps", "3", { other_params:"sensor=false" });
$(document).ready(function () {
And you reinitialize "var map" two times.

Answer 3

I didn't want to load the maps in a Layout page... Doing that would mean that if the script was taking long to load, it would slow the whole page and besides, if it is not needed there, then why make the browser download it?
To get around that, I found that you can load the maps API in your partial view like this:
$.getScript('http://maps.googleapis.com/maps/api/js',function (){
google.maps.event.addDomListener(window, 'load', initialize);
});