Thank you in advance for all your help. I’m trying to use google maps api with the new mvc3 razor, however when I go to run my code nothing is being displayed except a tag. However, if I create an html file I can get the map to be displayed. I’m sure I’ll be banging my head at how obvious the answer is, but for the past couple of days I’ve been looking at this code and been unable to figure out how to get it to work in VS. Please help:
I have in my _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<pre lang="aspnet">@RenderSection("Scripts", false)
<style type="text/css">
@RenderSection("Styles", false)
</style>
</head>
<body>
@RenderBody()
</body>
</html>
In my Index.cshtml:
@{
ViewBag.Title = "MVC 3 and Google Maps";
}
@section Scripts {
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
}
@section Styles {
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 80% }
}
<script type="text/javascript">
function initialize() {
//var latlng = new google.maps.LatLng(40.716948, -74.003563);
var options = { center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById
("map_canvas"), options);
}
$(function () {
initialize();
});
</script>
<h2>Hello, Google Maps</h2>
<div id="map_canvas" style="width:80%; height:80%"></div>
This is all I’m working with right now, hopefully one of you can show me what I am missing. I’ve looked at several pieces of similar code already, but for some reason in VS it’s not wanting to display google maps, but like I said my does get displayed. Thank you for all your help!
I figured it out, it was a stupid syntax error as I figured it would be. The pre tag was missing it’s pre end tag. Thank you guys for your help.