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

时间:2014-10-14 16:32:33

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

我现在已经开展了一两个月的相当不错的计划。我有一个奇怪的问题,点击地图上的标记会给出一个非常模糊的脚本错误。直到昨晚,一切都运转良好,突然间发生这种情况。

首先,这里简要介绍一下我的地图。加载此表单(VB)后,将从我的SQL Server数据库中提取记录列表。为每条记录创建具有唯一ID的标记。为每个标记创建一个InfoWindow,InfoWindow中填充了该记录列的详细信息。我认真对待这部分工作完美无瑕。我可以在地图上单击不同的标记,并打开它们的InfoWindow(如果已经打开了InfoWindow,则关闭它。)

(很抱歉不得不将这些作为链接发布,我不具备发布图片的10个声誉)。 现在,当我点击标记时突然间,我收到以下脚本错误。如果我选择"是,"显示另一个脚本错误。我无法弄清楚发生了什么。如果我注释掉(有效禁用)标记的点击事件,则没有脚本错误,但InfoWindows当然不会工作。我这样做是为了看看脚本错误是否出现了地图只是空转。我已经尝试清除InfoWindow的内容(只留下" test"作为其内容)来排除;仍然会得到脚本错误。我无法判断谷歌是否会发生这种情况,我不知道。那可能吗?第一个脚本错误中指出的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>

3 个答案:

答案 0 :(得分:9)

我在这里遇到同样的错误。我在WPF WebBrowser中使用谷歌地图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

答案 1 :(得分:4)

我遇到了与VBA for Access相同的问题。如果我在IE,Chrome等网页中打开网页但不在VBA WebBrowser(Shell.Explorer.2类)中,则可以正常工作。我很擅长相信这是一个谷歌的错误。我发现它更奇怪,因为错误消息引用了我的代码中没有那么多行的一行。

暂时解决这个问题,我强制要求v = 3.17。显然,只要3.17左右,它才会起作用。

答案 2 :(得分:1)

我也发现了同样的错误。我在java脚本中使用Google Map API V3。 您可以使用V = 3来避免特定的版本限制。使用V = 3始终生成最新版本。

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

for refrence - Google Map API V3 Version Documentation

相关问题