GoogleAPIの地図MVCアプリケーションでレンダリングしない

Question

以下は、Googleマップをいくつかのドロップダウンとともにレンダリングするためのコードです。私は複数のチュートリアルを辿って同じことを繰り返してきましたが、すべての場合、コードは例外/エラーなしでうまく動作するようですが、最終的にページが読み込まれるときにはドロップダウンだけで構成され、マップはロードされません。

もし私が間違っていたことを私に知らせるために正しい方向を指摘できる人がいれば、大きな助けになるでしょう。

@model WebTM.Models.MasterDataModel.MastersModel 

@{ 
    ViewBag.Title = "RetailersOnMap"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
    WebTM.Models.MasterDataModel.MastersModel ModelObj = new WebTM.Models.MasterDataModel.MastersModel(); 
    ModelObj.Zone = Model.Zone; 
    ModelObj.Region = Model.Region; 
    ModelObj.Territory = Model.Territory; 
    ModelObj.Taluk = Model.Taluk; 
} 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCss7ir2FP4Zves_bA-p1VtCXjzg4zzIyw&sensor=true"></script> 
<!-- Content Header (Page header) --> 
<section class="content-header"> 
    <h1> 
     Page Header 
     <small>Optional description</small> 
    </h1> 
    <ol class="breadcrumb"> 
     <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li> 
     <li class="active">Here</li> 
    </ol> 
</section> 
<script src="~/Scripts/jquery-1.11.3.min.js"></script> 
<section class="content"> 
    <script> 
     function MapInitialize() { 
      debugger; 
      var latitude = '@(System.Configuration.ConfigurationManager.AppSettings["Latitude"].ToString())'; 
      var longitude = '@(System.Configuration.ConfigurationManager.AppSettings["Longitude"].ToString())'; 

      var mapProp = { 
       center: new google.maps.LatLng(6.9167, 79.8473), 
       zoom: 10, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map1 = new google.maps.Map(document.getElementById("divMapView"), mapProp); 
      debugger 
      var latlng = new google.maps.LatLng(latitude, longitude); 
      var marker = new google.maps.Marker({ 
       position: latlng, 
       map: map1, 
       title: 'My Place' 
      }); 

     } 
     $(document).ready(function() { 
      debugger 
      MapInitialize(); 
      debugger 
     }); 
    </script> 
    <div class="col-md-3"> 

     @Html.LabelFor(m => m.Zone) 


     @Html.DropDownListFor(m => m.Zone, Model.Zones, "--Select Zone", new { @class = "form-control" }) 
     @Html.ValidationMessageFor(m => m.Zone) 


     <div> 
      @Html.LabelFor(m => m.Region) 


      @Html.DropDownListFor(m => m.Region, Model.Regions, "--Select Region", new { @class = "form-control" }) 
      @Html.ValidationMessageFor(m => m.Region) 

     </div> 
     <div> 
      @Html.LabelFor(m => m.Territory) 


      @Html.DropDownListFor(m => m.Territory, Model.Territories, "--Select Territory", new { @class = "form-control" }) 
      @Html.ValidationMessageFor(m => m.Territory) 

     </div> 
     <div> 
      @Html.LabelFor(m => m.Taluk) 


      @Html.DropDownListFor(m => m.Taluk, Model.Taluks, "--Select Taluk", new { @class = "form-control" }) 
      @Html.ValidationMessageFor(m => m.Taluk) 

     </div> 
    </div> 
    <div id="divMapView" class="col-md-9"> 

    </div> 

</section> 

Answer 1

あなたのコードに問題はありません。あなたの地図は実際に表示されますが、divはそれに応じて描画する高さが必要です。

<div id="divMapView" class="col-md-9" style="height: 300px"> 

Answer 2

スクリプトタグを変更して確認できますか。以下のコードは私のために働いた。 + divのサイズを設定する必要があります。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?callback=myMap&key=AIzaSyCss7ir2FP4Zves_bA-p1VtCXjzg4zzIyw&sensor=true"></script>