google maps in asp.net c# mvc 3

Question

So I can view the google map if I don't have any layout. When I insert my css design it doesn't work anymore.

This is the code for my view

@{ 
    ViewBag.Title = "MVC 3 and Google Maps"; 
}

@section Scripts { 
    <script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"></script>
}

@section Styles { 
    html { height: 80% } 
    body { height: 80%; 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 = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
        var map = new google.maps.Map(document.getElementById("map_canvas"), options);
    }

    $(function () {
        initialize();
    }); 

</script>

Here is the code for my _Layout.cshtml

    <!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>
        @RenderBody()
        <style type="text/css"> @RenderSection("Styles", false)</style>

    </body>
    </html>

I think in firefox you need to set both the width and the height of the map. — Richard Astbury
– Richard Astbury, Commented Nov 7, 2011 at 10:09

SliverNinja · Accepted Answer · 2011-11-07 08:19:33Z

0

Use FireBug, IE Developer Tools, or Chrome Inspector and disable styles until you can determine which one is causing it to be suppressed. The manual approach is to comment out your site styles until you determine where the problem is. Trial and Error here. Please post if you find the culprit.

answered Nov 7, 2011 at 8:19

SliverNinja

31.7k12 gold badges121 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mary Over a year ago

It seems that my program doesn't work in Mozilla Firefox but when I open it in Google Chrome it's okay. What I did was click a button and open the google map in a new blank page. What I want is to view the google map on the same page :( any other helpful answer?

Rob Kent · Accepted Answer · 2011-11-07 09:55:26Z

0

I had a similar problem and you just need to debug it one CSS attr at a time. The cause of mine was that the div was hidden initially which meant that the sizes were not being set correctly when I displayed it. Similar display problems can be solved by triggering a resize of the Google map:

    google.maps.event.trigger(myMap, 'resize');

The cause of my problem was that the Google map was rendering before some other elements and was using their default values to determine its own visual characteristics. Triggering the resize event caused it to recalculate its available space. Just an idea.

answered Nov 7, 2011 at 9:55

Rob Kent

5,1934 gold badges37 silver badges54 bronze badges

Collectives™ on Stack Overflow

google maps in asp.net c# mvc 3

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related