使用MVC5在CSHTML中编写DIV元素ID

Question

我试图在我的视图中显示Google Map。这是我的代码：

$(document).ready(function () {
    Initialize();
    function Initialize() {
        google.maps.visualRefresh = true;
        var Tunisie = new google.maps.LatLng(36.81881, 10.16596);
        var mapOptions = {
            zoom: 8,
            center: Tunisie,
            mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var myLatlng = new google.maps.LatLng(36.81881, 10.16596);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Tate Gallery'
        });
        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }
});

当前，此JavaScript放置在索引视图中。我想在具有ID map_canvas的DIV元素中应用此JavaScript。我在此cshtml中使用div元素与id map_canvas，但没有显示...

在哪里可以使用Div元素？

Answer 1

您需要替换：

<script src="maps.google.com/maps/api/js?sensor=true"; type="text/javascript"></script>

with：

<script src="http://maps.googleapis.com/maps/api/js?sensor=true" ; type="text/javascript"></script>

编辑：

这是我在测试项目中拥有的确切代码：

index.cshtml：

<style>
#map_canvas{
        margin-top: 50px;
        height: 250px;
    }
</style>
@section Scripts{
<script src="http://maps.googleapis.com/maps/api/js?sensor=true" ; type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        Initialize();
        function Initialize() {
            google.maps.visualRefresh = true;
            var Tunisie = new google.maps.LatLng(36.81881, 10.16596);
            var mapOptions = {
                zoom: 8,
                center: Tunisie,
                mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            var myLatlng = new google.maps.LatLng(36.81881, 10.16596);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Tate Gallery'
            });
            marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
        }
    });
</script>
}