Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 822
Stealth Pyro Avatar asked Oct 14 '14 16:10

Stealth Pyro


People also ask

How to open the infowindow on the map?

Open an info window. When you create an info window, it is not displayed automatically on the map. To make the info window visible, you need to call the open() method on the InfoWindow, passing it the Map on which to open, and optionally, the Marker with which to anchor it. If no marker is provided,...

What are the fields in infowindowoptions?

The InfoWindowOptions object literal contains the following fields: content contains either a string of text or a DOM node to display in the info window. pixelOffset contains an offset from the tip of the info window to the location on which the info window is anchored.

How to handle the focus of an infowindow manually?

// Handle focus manually. There are a couple of ways to change the location of an info window: Attach the info window to a new marker using the InfoWindow.open () method. Note: If you call open () without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.

How do I attach the infowindow to a marker?

Attach the info window to a new marker using the InfoWindow.open () method. Note: If you call open () without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal. The InfoWindow class does not offer customization.


2 Answers

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.

like image 61
Alexandre Assis Avatar answered Nov 13 '22 11:11

Alexandre Assis


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.

like image 39
IVstringer Avatar answered Nov 13 '22 09:11

IVstringer