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