CODEWITHSUNDEEP
asp.net-mvc-3google-maps
CodeNoob
CodeNoob

Reputation: 411

MVC 3 doesn't show Google Maps

I'm trying to right an MVC app that uses Google Maps. I got sample code from CodeProject but the map doesn't seem to display on IE, Chrome and Firefox. Index view code:

@{ 
ViewBag.Title = "MVC 3 and Google Maps";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
function Initialize() {
var latlng = new google.maps.LatLng('40.716948', '74.003563');
var options = { zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
}

$(function () {
Initialize();
});
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">   </script>
<div id="map_canvas" style="width: 400px; height: 300%;">
</div>

layout view code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">    </script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
@RenderSection("Scripts", false)
<style type="text/css"> 
        @RenderSection("Styles", false) 
    </style>
</head>
<body>
<div class="page">
    <header>
        <div id="title">
            <h1>My MVC Application</h1>
        </div>
        <div id="logindisplay">
            @Html.Partial("_LogOnPartial")
        </div>
        <nav>
            <ul id="menu">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
        </nav>
    </header>
    <section id="main">
        @RenderBody()
    </section>
    <footer>
    </footer>
</div>
</body>
</html>

I am not sure what to do anymore, please help a brother out.

Upvotes: 0

Views: 1616

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

Try like this:

<script type="text/javascript">
    function Initialize() {
        var latlng = new google.maps.LatLng(40.716948, 74.003563);
        var options = {
            zoom: 14,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), options);
    }

    $(function () {
        Initialize();
    });
</script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<div id="map_canvas" style="width: 400px; height: 300px;"></div>

Things to notice:

  • latitude and longitude are specified as floating point values, not strings
  • the height of the div is 300px instead of 300%.

Also notice that the coordinates you specified (40.716948, 74.003563) are in the mountains of central Kyrgyzstan, so don't get surprised if you do not get a very detailed maps at this zoom level.

For example here are the coordinates of MS headquarters in Redmond: var latlng = new google.maps.LatLng(47.652437, -122.132424);.

Upvotes: 2

Related Questions