Google Maps JS API (v3) InfoWindow 脚本错误 - JSON 未定义答案

【问题标题】：Google Maps JS API (v3) InfoWindow Script Error - JSON UndefinedGoogle Maps JS API (v3) InfoWindow 脚本错误 - JSON 未定义
【发布时间】：2014-12-09 12:57:35
【问题描述】：

一两个月以来，我一直在研究一个相当不错的程序。我遇到了一个奇怪的问题，即单击地图上的标记会给出一个非常模糊的脚本错误。从字面上看，就在昨晚，一切正常，突然之间发生了这种情况。

首先，简要介绍一下我的地图。一旦加载此表单 (VB)，就会从我的 SQL Server 数据库中提取记录列表。为每条记录创建一个具有唯一 ID 的标记。为每个标记创建一个 InfoWindow，InfoWindow 中填充了该记录列中的详细信息。我认真地让这部分工作完美无缺。我可以单击地图上的不同标记，然后打开它们的信息窗口（如果之前的信息窗口已经打开，则关闭前一个信息窗口）。

（很抱歉不得不将这些作为链接发布，我没有发布图片的 10 名声望）。现在，突然间，当我单击标记时，出现以下脚本错误。如果我选择“是”，则会显示另一个脚本错误。我不知道发生了什么事。如果我注释掉（有效地禁用）标记的单击事件，则不会出现脚本错误，但 InfoWindows 将无法正常工作。我这样做是为了查看脚本错误是否会导致地图处于空闲状态。我尝试清除 InfoWindow 的内容（只留下“测试”作为其内容）以排除这种情况；仍然得到脚本错误。我不知道这是否会发生在谷歌的末端，我不知道。那可能吗？第一个脚本错误中记录的 URL 表明这是该脚本中的问题，我认为这表明这可能已经结束了？

最后，我的.htm。我应该澄清一下，我是在 Visual Basic 程序中执行此操作的。我的表单上有一个容器，我创建并放置了一个 WebBrowser 对象。然后我让 WebBrowser 加载这个 .htm 页面。就在一两个晚上之前，这非常有效，我无法弄清楚问题所在。我什至打开了两周前的备份，但这不起作用。

<!DOCTYPE html>
<html>
<head><title></title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_canvas {
            height: 100%;
        }
    </style>

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

    <script type="text/javascript">

        var map;
        var Markers = [];

        function Initialize(zoomLevel, lat, lng, type) {
            //Get the type of map to start.
            //Need to convert the GoogleMapType enum
            //to an actual Google Map Type
            var MapType;
            switch (type) {
                case 1:
                    MapType = google.maps.MapTypeId.ROADMAP;
                    break;
                case 2:
                    MapType = google.maps.MapTypeId.TERRAIN;
                    break;
                case 3:
                    MapType = google.maps.MapTypeId.HYBRID;
                    break;
                case 4:
                    MapType = google.maps.MapTypeId.SATELLITE;
                    break;
                default:
                    MapType = google.maps.MapTypeId.ROADMAP;
            };            

            var myLatlng = new google.maps.LatLng(lat, lng);
            var myOptions = { zoom: zoomLevel, center: myLatlng, mapTypeId: MapType };
            var MarkerSize = new google.maps.Size(48, 48);

            map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
            //google.maps.event.addListener(map, 'click', Map_Click);
            google.maps.event.addListener(map, 'mousemove', Map_MouseMove);
            google.maps.event.addListener(map, 'idle', Map_Idle);

            }

        //function Map_Click(e) {
        //    window.external.Map_Click(e.latLng.lat(), e.latLng.lng());
        //}  

        function Map_MouseMove(e) {
            window.external.Map_MouseMove(e.latLng.lat(), e.latLng.lng());
        }

        function Map_Idle() {
            window.external.Map_Idle();
        }

        function DeleteMarkers() {
            if (Markers) {
                for (i in Markers) {
                    Markers[i].setMap(null);
                    google.maps.event.clearInstanceListeners(Markers[i]);
                    Markers[i] = null;
                }
                Markers.length = 0;
            }
        }

        function LoadMarkers(JobID, CustomerName, PhotoURL, item, lat, lng, description, DateTimeRequested) {
            var MarkerLatLng = new google.maps.LatLng(lat, lng);
            var MarkerOption = { map: map, position: MarkerLatLng, title: name};
            var Marker = new google.maps.Marker(MarkerOption);

            var infowindow = new google.maps.InfoWindow(
                {
                    content: "<font size='3'><b>" + item + "</b></font>" + "<font size='1'><br>Requested: " + DateTimeRequested + " by: " + CustomerName + "</font>"
                        + "<hr width=75% align='left'>"
                        + description + "<br><br><img width='48' align='center' src='myURLHere" + PhotoURL + "'</img>",
                    id: JobID
                });

            google.maps.event.addListener(Marker, 'click', function () {
                typeof infoWindowsOpenCurrently !== 'undefined' && infoWindowsOpenCurrently.close(); //If there is infowwindow currently open, close it
                infowindow.open(map, this); //Open a new one for the selected marker
                infoWindowsOpenCurrently = infowindow; //Set the new info window to the temporary variable
            });
            google.maps.event.addListener(map, 'click', function () { infowindow.close(Marker.get('map'), Marker) && infoWindowsOpenCurrently == infowindow});

            Markers.push(Marker);
            MarkerLatLng = null;
            MarkerOption = null;
        }

        function GetSelectedMarker() {
            typeof infoWindowsOpenCurrently !== 'undefined' && window.external.Get_Selected_Marker(infoWindowsOpenCurrently.id);
        }
   </script>

</head>
<body>
    <div id="map_canvas" style="width: 100%; height: 100%">
    </div>
</body>
</html>

【问题讨论】：

为了排除我的数据库记录的问题，我硬编码了一个额外的标记变量“markertest”、信息窗口变量“infowindowtest”，并将其放置在非洲的一个随机位置，它仍然会导致单击标记时出现相同的脚本错误。

标签： google-maps google-maps-api-3 google-maps-markers infowindow

【解决方案1】：

我在这里遇到同样的错误。我在 WPF WebBrowser 中使用 Google Maps JS 并且 3 天前运行良好。今天使用相同的源代码，我得到了同样的错误。将 Google Maps JS 的版本设置为 3.17 (src="http://maps.google.com/maps/api/js?v=3.17")。我这样做了：

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

更多信息请查看Google Documentation。

【讨论】：

你是神。出于好奇，您是从哪里获得这个“新”网址的？即使现在谷歌搜索也不会给我带来任何结果。
我比好人更幸运，哈哈。搜索谷歌地图版本时我掉进了这个Google 页面。祝你好运！
好吧，我刚刚意识到一些事情......你给我的链接是谷歌地图墨西哥的。对于我的应用程序来说，这确实不是一个严重的问题，但我尝试只使用“maps.google.com”而不使用“.mx”，它仍然有效。所以还是为你干杯！
复制和粘贴失败...我的源代码有它，我从来没有看到它...会改变它。谢谢。

【解决方案2】：

我在使用 VBA for Access 时遇到了同样的问题。如果我在 IE、Chrome 等中打开网页但不在 VBA WebBrowser（Shell.Explorer.2 类）中打开网页，它可以工作。我倾向于相信这是谷歌的错误。我发现这很奇怪，因为错误消息引用了我的代码中没有那么多行的行。

为了暂时解决这个问题，我强制 API 使用 v=3.17。显然，只要 3.17 左右，它就可以工作。

【讨论】：

是的！经过数小时阅读每一行代码后，我现在真的有同样的感觉。你是如何强制 3.17 的？我想考虑做同样的事情。

【解决方案3】：

我也观察到同样的错误。我在 java 脚本中使用 Google Map API V3。您可以使用 V=3 来避免特定的版本限制。使用 V=3 总是产生最新的发布版本。

例如“https://maps.googleapis.com/maps/api/js?v=3&sensor=false”

供参考-Google Map API V3 Version Documentation

【讨论】：