您已在此页面上多次添加Google Maps API错误，但我已经包含了

Question

我已阅读有关此错误的所有教程。但我无法解决我的问题。我想根据我的经度和纬度使用Google apis显示地图。 我添加了地图api以使用Google地图，如下所示：

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

在_Layout.cshtml中添加此库后，我收到如下错误：

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

即使没有在map.cshtml文件中添加任何有关Google地图的代码，也会发生此错误。所以我认为这个错误与谷歌地图代码无关。 Google地图代码在map.cshtml文件中如下所示：

<script>
    $(document).ready(function () {
        InitializeMap();
    });

    function InitializeMap() {
        var data = {
            Latitude: '@Model.Latitude',
            Longitude: '@Model.Longitude'
        };
        var latlong = new google.maps.LatLng(data.Latitude, data.Longitude);
        var myOptions = {
            zoom: 12,
            center: latlong,
            mapTypeControl: true,
            scaleControl: true,
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            },
            fullscreenControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("Map"), myOptions);
    } 
</script>

将显示Google地图的div标签如下所示：

<div id="Map" style="width: 750px; height: 500px"></div> 

我搜索了＃go; googleapis＆＃39;所有当前项目中的单词，但我找不到另一个。错误如下：

Answer 1

我最近遇到了同样的错误。我想根据经度和纬度来显示地图。单击serach按钮时会显示地图。单击搜索按钮时，将坐标发送到控制器操作方法。然后地图显示在同一页面。因为我在javascript中使用ajax调用控制器操作。这样两个视图页面就在同一个视图中。每次我收到此错误。我在index.html中的搜索按钮如下：

<button type="button" id="btnSearch" class="btn btn-warning" style="height:35px;width:120px">
                    <i class="fa fa-search" aria-hidden="true"></i>
                    <translate>Search</translate>
</button>

我在index.html中的ajax调用如下所示：

$('#btnSearch').click(function () {      
            $.ajax({
                url: '@Url.Action("Search", "ControllerName")',
                data: { Name: $('#Name').val() },
                type: 'POST',
                success: function (data) {
                    $("#mapSupriseForm").html(data);
                }
            });
    });

地图显示在index.html中的'mapSupriseForm'惊奇表单中。它在下面：

<div id="mapSupriseForm"></div>

Google地图代码位于search.cshtml中。 Search.cshtml显示在index.cshtml中。即index.cshtml和search.cshtml是同一个地方。我将google maps api库添加到了_Layout.cshtml。 Search.cshtml和index.cshtml使用_Layout.cshtml作为loyout。因此谷歌地图api被添加多次，而不是浏览器抛出错误。 Search.cshtml位于index.cshtml中，因此search.cshtml不应添加_Layout.cshtml。由于index.cshtml，search.cshtml已经使用了_Layout.cshtml。由于所有这些原因，我从search.cshtml中禁用布局，如下所示：

@{
    ViewBag.Title = "Search";
    Layout = "";
} 

通过这种方式，谷歌地图api库被添加一次。并且错误得以解决。我希望这段经历可以帮助您解决问题。