Google Maps JS API (v3) InfoWindow Script Error - JSON Undefined

I've been working on quite a nice program for a month or two now. I'm having an odd issue where clicking a marker on my map is giving a very vague script error. Literally just last night everything was working fine and all of a sudden this is happening.

First, here's a brief look at my map. As soon as this form (VB) loads, a list of records is pulled from my SQL Server database. A marker with a unique ID is created for each record. An InfoWindow is made for each marker, and the InfoWindow is filled with details from the columns for that record. I seriously had this part working flawlessly. I can click different markers on the map, and have their InfoWindow opened (while closing the previous InfoWindow if one was already open).

(Sorry for having to post these as links, I don't have the 10 reputation to post images).

Now, all of a sudden when I click on a marker, I get the following script error. If I choose "Yes," another script error is shown. I can't figure out what's going on. If I comment out (effectively disabling) my click event for the marker, there is no script error, but of course the InfoWindows won't work. I did this to see if the script errors come up with the map just idling. I've tried clearing the content of the InfoWindow (leaving just "test" as its content) to rule that out; still get the script errors. I can't tell if this may be something going on on Google's end, I don't know. Is that possible? The URL noted in the first script error indicates that it's a problem in that script, which I think would indicate that this could be on their end?

And finally, my .htm. I should clarify that I am doing this in a Visual Basic program. I have a container on my form which I create and place a WebBrowser object into. Then I have the WebBrowser load this .htm page. This worked amazingly as of just a night or two ago and I can't figure out the problem. I've even opened a backup from two weeks ago and this isn't working.

<!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>

I'm with the same error here. I'm using Google Maps JS in WPF WebBrowser and 3 days ago was running perfectly. Today with the same source code I got that same error. Set the version of the Google Maps JS to 3.17 (src="http://maps.google.com/maps/api/js?v=3.17"). I did this:

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

For more information check Google Documentation.

I encountered the same problem with VBA for Access. It works if I open the webpage in IE, Chrome, etc. but not within the VBA WebBrowser (Shell.Explorer.2 class). I'm inclinced to believe it's a Google bug. I found it extra weird because the error message references a line in my code which doesn't have that many lines.

To work around it for now, I forced v=3.17 for the API. Obviously it will only work as long as 3.17 is around.

I also observed same error. I am using Google Map API V3 in java script. you can use V=3 to avoid particular version restriction. using V=3 always produces latest release version.

Example "https://maps.googleapis.com/maps/api/js?v=3&sensor=false"

for refrence -Google Map API V3 Version Documentation

来源：https://stackoverflow.com/questions/26365774/google-maps-js-api-v3-infowindow-script-error-json-undefined

标签

google-maps

google-maps-api-3

google-maps-markers

infowindow