MVC 3にGoogle Maps v3を表示していません

ご協力いただきありがとうございます。私は新しいmvc3かみそりでGoogleマップのAPIを使用しようとしているが、私は私のコードを実行するために行くときは何もタグを除いて表示されていません。ただし、htmlファイルを作成すると、マップを表示することができます。私は答えがどれほど明白であるかを頭に浮かべているだろうと確信していますが、過去2〜3日間、私はこのコードを見ていて、VSで動作させる方法を理解できませんでした。助けてください：MVC 3にGoogle Maps v3を表示していません

を、私は私のIndex.cshtmlで私の_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>

で持っている：

@{ 
    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>

これは、私はうまくいけば1あなたのことができ、今で働いているすべてであります私が見逃していることを私に見せてください。私はすでに同様のコードのいくつかの部分を見てきましたが、VSで何らかの理由でGoogleマップを表示したくないのですが、私のように表示されます。すべてのあなたの助けをありがとう！

出典

2012-03-13 4everAStudent

は、私はそれが可能と考えましたとして、それは愚かな構文エラーだった、それを考え出した。preタグは、それが事前終了タグの欠落していました。あなたの助けみんなありがとう。

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

出典

2012-03-14 01:51:22 4everAStudent

あなたのscritタグの前にDIV <div id="map_canvas" style="width:80%; height:80%"></div>を定義してください。それが動作します。コードを以下のように書き換える必要があります。

@{ 
    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>

出典

2012-03-13 04:40:27

ご協力いただきありがとうございますが、私はそれを試して、運がありませんでした。 – 4everAStudent

私が知る限り、問題の原因は_layout.cshtmlのpreタグです。私は、CSSを持っていなかったので、私はちょうどその参照を削除し、GoogleのCDNを経由して別のjqueryの参照を追加（ストレートHTMLページとしてコードの迅速なモックアップをした：

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

私は削除後それは完全に働いたpreタグ、。

出典

2012-03-13 04:43:56 javram

preタグを削除しようとしましたただし、「System.Web.HttpException：次のセクションは定義されていますが、レイアウトページではレンダリングされていません」というエラーメッセージが表示されます。〜/ Views/Shared/_Layout.cshtml： "Scripts"それを維持する必要がある、任意の思考？ – 4everAStudent

MVC 3にGoogle Maps v3を表示していません

答えて

関連する問題