GoogleAPI's Map Not rendering in MVC Application

Question

Below is my code to render Google map along with some drop downs. I have followed multiple tutorials and replicated the same, but in all the cases the code seems to run fine without any exception/error, but finally when the page loads it only consists of the drop downs and the map is not loaded.

It would be of great help if some one could point me int the right direction to let me know what i did wrong.

@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

Can you change the script tag and check. The below code worked for me . + u need to set size for div.

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

Answer 2

There is no problem in your code, And your map is actually displayed but the div need height to draw according to it.

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