Home/ Questions/Q 954969
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T00:18:11+00:00

Somehow I cannot get a simple map to work in a ASP.NET MVC 2

  • 0

Somehow I cannot get a simple map to work in a ASP.NET MVC 2 application with Google Maps Javascript API V3. I have tried the following:

Site.Master:

Removed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Added

<!DOCTYPE html>

Added this in < head >

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

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

<script type="text/javascript">
$(function () {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});

In Views\Home\Index.aspx, added this in a contentplaceholder

<div id="map_canvas"></div>

Am I missing something?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s a CSS issue of some sort. When google maps creates the map in map_canvas it sets the position: relative CSS style on it. For some reason that is causing an issue with the default master file in MVC2.

    If you remove all the stuff from the body of the default Site.Master and just leave the MainContent section as show below it works just fine.

    <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

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

    <script type="text/javascript">
    $(function () {
        var myLatlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    });
    </script>
</head>

<body>

            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>

    Also if you use Firebug with the template that you are using right now you can see that when you turn off the position: relative from the map_canvas element it shows up.

    So hopefully that at least gets you going in the right direction.

    • 0