CODEWITHSUNDEEP
c#asp.net-mvc-3razorgoogle-maps-api-3
4everAStudent
4everAStudent

Reputation: 1

Not displaying Google Maps v3 in MVC 3

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!

Upvotes: 0

Views: 3356

Answers (3)

4everAStudent
4everAStudent

Reputation: 1

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.

<pre lang="aspnet">@RenderSection("Scripts", false)</pre>

Upvotes: 0

javram
javram

Reputation: 2645

As far as I can tell, the thing that is causing the issue is the pre tag in your _layout.cshtml. I did a quick mockup of the code as a straight HTML page (since I didn't have the css, I just removed that reference, and added a separate jquery reference via the google CDN:

    <!DOCTYPE html>
<html>
 <head>
  <title>@ViewBag.Title</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>

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

  <style type="text/css"> 
     html { height: 100% } 
  body { height: 100%; margin: 0px; padding: 0px } 
  #map_canvas { height: 80% }
  </style>

 </head>

  <body>
 <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>

  </body>
</html>

once I removed the pre tag, it worked perfectly.

Upvotes: 1

alok_dida
alok_dida

Reputation: 1733

Please define DIV <div id="map_canvas" style="width:80%; height:80%"></div> before your scrit tag. It will work. Your need to rewrite your code as below.

@{ 
  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% } 
} 
<h2>Hello, Google Maps</h2>
<div id="map_canvas" style="width:80%; height:80%"></div>
<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>

Upvotes: 0

Related Questions