ASP.NET MVC 2 and Google Maps Javascript API Version 3

问题

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?

回答1:

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.

回答2:

For posterity's sake, an enclosing div works:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <h2>Visibility</h2>
        <div style="width:100%;height:100%;">
            <div id="map_canvas" style="width:1024px; height:768px;"></div>
        </div>    
</asp:Content>

来源：https://stackoverflow.com/questions/3344743/asp-net-mvc-2-and-google-maps-javascript-api-version-3

标签

asp.net-mvc-2

google-maps-api-3