Google Maps Script error in Onion.js

Question

This morning I just started getting a google maps script error.

Line: 0 Char: 0 Error: Script Error Code: 0 URL:

I reverted all my code changes back to an earlier version but it still persists.

I will include the script below but I must mention that this runs in a Delphi TWebBrowser that interfaces IE.

I can run my program, interact with the Page and then let it sit idle. After 20 seconds or so, without any user interaction, I get the persistent error above. When I close the Error Message box, it immediately opens with the same message.

I have been working this project for months and now this started. I have rolled back several versions but it still persists.

Where do I start looking?

<html>
  <head>
    <title>Find your Qtr minute locator</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?api=AIzaSyAa7YZpvi09ig92s_BLP2H3QVLTmoqdcQQ&amp;v=3.exp&amp;libraries=geometry&amp;sensor=false"></script>
  </head>
  <body><!-- Declare the div, make it take up the full document body -->
    <div id="map-canvas" style="HEIGHT: 100%; WIDTH: 100%"></div>
    <script type="text/javascript">
    var map;
    var idx = 0;
    var qtrArray = [];
    var userGridArray = [];
    var Startlatlng = "";
    var llOffset = 0.00416666666667;
    var babyOffset = (llOffset/2);  // offsets gridSelector 1/2 qtr min
    var drawGridSelectBox = false;
    var findNeighbor = false;
    var firstRun = true;
    var drawGridBox = false;
    var deSelectOn = false;
    var GridSelect = false;
    var gridOverBox = new google.maps.Polygon();
    var gridSelectBox = new google.maps.Polygon();

    var gridline;
    var polylinesquare;
    var latPolylines = [];
    var lngPolylines = [];
    var lngLabels = [];
    var otherColor =  "#128A00";
    var bounds = new google.maps.LatLngBounds();

    function initialize() {
        map = new google.maps.Map(document.getElementById("map-canvas"), {
            center: new google.maps.LatLng(34.0, -84.0),
            zoom: 14,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true
        });

        google.maps.event.addListener(map, "click", function (event) {
            if (!google.maps.geometry.poly.containsLocation(event.latLng, gridSelectBox)) {
                map.setZoom(14);
              if (findNeighbor)
                MarkArea(event.latLng.lat(), event.latLng.lng());
                if (drawGridSelectBox) {
                  createGridSelectBox(event.latLng);
                  GridSelect = !firstRun;
                    if (!GridSelect) {
                        ClearGrid()
                    }
                }

                for(var xx=0;xx<latPolylines.length;++xx){
                    for(var yy=0;yy<lngPolylines.length-1;++yy){
                        var latLng=new google.maps.LatLng(latPolylines[xx].getPath().getAt(0).lat(),
                                lngPolylines[yy].getPath().getAt(0).lng());

                        if ((google.maps.geometry.poly.containsLocation(latLng, gridSelectBox))&&(!firstRun))
                        {
                            drawGridBox = true;
                            createGridBox(latLng);
                        }
                    }
                }
                firstRun = false;
                map.panTo(event.latLng);
                drawGridBox = false;

            }});

        DrawGridOn();
        google.maps.event.addListener(map, "idle", function () {
            createGridLines(map.getBounds());
        });
    }  // initialize

    google.maps.event.addDomListener(window, "load", initialize);

    function createGridLines(bounds) {
        for (var i = 0; i < latPolylines.length; i++) {
            latPolylines[i].setMap(null);
        }

        latPolylines = [];
        for (var j = 0; j < lngPolylines.length; j++) {
            lngPolylines[j].setMap(null);
        }
        lngPolylines = [];

        for (var k = 0; k < lngLabels.length; k++) {
            lngLabels[k].setMap(null);
        }
        lngLabels = [];

        if (map.getZoom() < 10) return;
        var north = bounds.getNorthEast().lat();
        var east  = bounds.getNorthEast().lng();
        var south = bounds.getSouthWest().lat();
        var west  = bounds.getSouthWest().lng();

    // define the size of the grid
        var topLat    = Math.ceil(north / llOffset) * llOffset;
        var rightLong = Math.ceil(east / llOffset) * llOffset;

        var bottomLat = Math.floor(south / llOffset) * llOffset;
        var leftLong  = Math.floor(west / llOffset) * llOffset;


        var qtrNELatLngCode = ddToQM(topLat, rightLong);
        var qtrNorth = qtrNELatLngCode.substring(0, 5);
        var qtrEast = qtrNELatLngCode.substring(5, 12);
        var qtrSWLatLngCode = ddToQM(bottomLat, leftLong);
        var qtrSouth = qtrSWLatLngCode.substring(0, 5);
        var qtrWest = qtrSWLatLngCode.substring(5, 12);

        for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) latPolylines.push(new google.maps.Polyline({
            path: [
                new google.maps.LatLng(latitude, leftLong), new google.maps.LatLng(latitude, rightLong)],
            map: map,
            geodesic: true,
            strokeColor: "#0000FF",
            strokeOpacity: 0.1,
            strokeWeight: 1
        }));
        for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) lngPolylines.push(new google.maps.Polyline({
            path: [
                new google.maps.LatLng(topLat, longitude), new google.maps.LatLng(bottomLat, longitude)],
            map: map,
            geodesic: true,
            strokeColor: "#0000FF",
            strokeOpacity: 0.1,
            strokeWeight: 1
        }));

        if (map.getZoom() < 15) {
            for (var l = 0; l < lngLabels.length; l++) {
                lngLabels[l].setMap(null);
            }
            lngLabels = [];
            return;
        }  // set lngLabels to null

        for(var x=0;x<latPolylines.length;++x){
            for(var y=0;y<lngPolylines.length-1;++y){
                var latLng=new google.maps.LatLng(latPolylines[x].getPath().getAt(0).lat(),
                        lngPolylines[y].getPath().getAt(0).lng());

                var qtrLatLng = ddToQM(latLng.lat(), latLng.lng());

                lngLabels.push(new google.maps.Marker({
                    map:map,
                    position:latLng,
                    icon:{  url:"https://chart.googleapis.com/chart?"
                    +"chst=d_bubble_text_small&chld=bb|"
                    + qtrLatLng
                    +"|FFFFFF|000000",
                        anchor:new google.maps.Point(0,42)
                    }
                }));
            }
        }
        external.ShowQtrMinBounds(qtrNorth, qtrSouth, qtrEast, qtrWest);
    }  // end createGridLines

    function createGridSelectBox(point) {
    // Square limits
        var smPoint = point;

        var bottomLeftLat  = (Math.floor(point.lat() / llOffset) * llOffset) - babyOffset;
        var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset) - babyOffset;


        var gridLineSquare = [
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong),  //lwr left
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong + llOffset),  //lwr right
            new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong + llOffset),  //upr right
            new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong)];  //upr left
    //auto-complete to lwr left

        if (drawGridSelectBox == true) {
            gridSelectBox = new google.maps.Polygon({
                path: gridLineSquare,
                draggable:true,
                geodesic:true,
                editable :true,
                fillColor: "#FF0000",
                fillOpacity: 0.35,
                strokeColor: "#CC0099",
                strokeOpacity: 0.1,
                strokeWeight: 1
            });

            gridSelectBox.setMap(map);
            drawGridSelectBox = false;
        }
    }

    function MarkArea(Lat, Lng) {
        var latLng = new google.maps.LatLng(Lat,Lng);
        drawUserGrids(latLng);
    }

    function SaveQtrMin(){
                for (var m in qtrArray) {
                    external.SaveQtrMinutes(qtrArray[m].qtrMinute);
                }
    }

     function DrawGridOn() { //creates GridSelectBox
        addGridOn = false;
        drawGridSelectBox = true;
        firstRun = true;
    }

    function DrawGridOff() {
            gridSelectBox.setMap(null);
            drawGridSelectBox = false;
    }

    function GotoLatLng(Lat, Lng) {
            var latlng = new google.maps.LatLng(Lat,Lng);
            map.setCenter(latlng);
    }

    function DeSelectOn(){
        deSelectOn = true;
        addGridOn = false;
    }

    function DeSelectOff(){       // Allows removing 1 QtrMin
        deSelectOn = false;
    }

    function AddGridOn(){        // Allows adding 1 QtrMin
        addGridOn = true;
        deSelectOn = false;
    }

    function AddGridOff(){
        addGridOn = false;
    }

    function ClearGrid() {
        if (qtrArray) {
            for (var i in qtrArray) {
                qtrArray[i].setMap(null);
            }
        }
        qtrArray=[];
        idx = 0;
    }

    function ClearUserGrid() {
        if (userGridArray) {
            for (var i in userGridArray) {
                userGridArray[i].setMap(null);
            }
        }
        userGridArray=[];
    }

    function drawUserGrids(point) {
    // Square limits

        var bottomLeftLat = (Math.floor(point.lat() / llOffset) * llOffset);
        var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset);

        var gridLineSquare = [
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong),  //lwr left
            new google.maps.LatLng(bottomLeftLat, (bottomLeftLong + llOffset)),  //lwr right
            new google.maps.LatLng((bottomLeftLat + llOffset), (bottomLeftLong + llOffset)),  //upr right
            new google.maps.LatLng((bottomLeftLat + llOffset), bottomLeftLong)];  //upr left


        drawGridBox = true;

        if (drawGridBox == true) {

            gridUserArea = new google.maps.Polygon({
                path: gridLineSquare,
                draggable:false,
                geodesic:true,
                editable :false,
                fillColor:otherColor,
                fillOpacity: 0.35,
                strokeColor: "#CC0099",
                strokeOpacity: 0.1,
                strokeWeight: 1
            });

            gridUserArea.setMap(map);
            userGridArray.push(gridUserArea);
        }
    }

     function createGridBox(point) {
        // Square limits
        var arrayIdx = 0;
        var addListenersOnPolygon = function(polygon) {
            google.maps.event.addListener(polygon, 'click', function (event) {
                if (deSelectOn==true) {
                arrayIdx = qtrArray.indexOf(polygon);
                qtrArray.splice(arrayIdx,1);
                polygon.setMap(null);
                }
            });
        };
        var smPoint = point;

        var bottomLeftLat = (Math.floor(point.lat() / llOffset) * llOffset);
        var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset);


        var gridLineSquare = [
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong),  //lwr left
            new google.maps.LatLng(bottomLeftLat, (bottomLeftLong + llOffset)),  //lwr right
            new google.maps.LatLng((bottomLeftLat + llOffset), (bottomLeftLong + llOffset)),  //upr right
            new google.maps.LatLng((bottomLeftLat + llOffset), bottomLeftLong)];  //upr left
        drawGridBox = true;

        if (drawGridBox == true) {
            gridOverBox = new google.maps.Polygon({
                path: gridLineSquare,
                draggable:false,
                geodesic:true,
                editable :false,
                fillColor: "#EAED00",
                fillOpacity: 0.35,
                strokeColor: "#CC0099",
                strokeOpacity: 0.1,
                strokeWeight: 1,
                qtrMinute : ddToQM(bottomLeftLat, bottomLeftLong),
                indexID : ++idx
            });

            gridOverBox.setMap(map);
            addListenersOnPolygon(gridOverBox);
            qtrArray.push(gridOverBox);
        }
    }

    function ddToQM(alat, alng) {
        var latResult, lngResult, dmsResult;

        alat = parseFloat(alat);
        alng = parseFloat(alng);

        latResult = "";
        lngResult = "";

        latResult += getDms(alat);
        lngResult += getDms(alng);

        dmsResult = latResult + lngResult;

        // Return the resultant string.
        return dmsResult;
    }

    function toggleGridSelection(){
        GridSelect = true;//(!!GridSelect);
    }

    function findNeighborOn(){
        findNeighbor = true;
        otherColor = randColor();
    }

    function findNeighborOff(){
        findNeighbor = false;
        otherColor =  "#128A00";
    }

    function randColor() {
       var i;
       var colorArray = ["#B2A209","#A4A07B","#B02600","#6CA200","#BC0072","#B1ADFF","#16CADB","#A1FFD1","#9999CC","#EEFF7C"];

       i = Math.floor((Math.random() *10)+1);
       return colorArray[i];
    }

    function getDms(val) {
    // Required variables
        var valDeg, valMin, valSec, interimResult;
        var qtrMin;
        val = Math.abs(val);

    // ---- Degrees ----
        valDeg = Math.floor(val);
        valMin = Math.floor((val - valDeg) * 60);
        valSec = Math.round((val - valDeg - valMin / 60) * 3600 * 1000) / 1000;

        if (valSec == 60){
            valMin +=1;
            valSec = 0;
        }
        if (valMin == 60){
            valMin +=1;
            valSec = 0;
        }
        interimResult = valDeg+"";

        if (valMin<10){
            valMin = "0"+valMin;
        }
        interimResult += valMin + "";

        switch(valSec){
            case  0 : qtrMin = "A";
                break;
            case 15 : qtrMin = "B";
                break;
            case 30 : qtrMin = "C";
                break;
            case 45 : qtrMin = "D";
                break;

        }
        interimResult += qtrMin;
        return interimResult;
    }

</script>
  </body>
</html>

What version of IE is being used? [Browsers supported](https://developers.google.com/maps/documentation/javascript/browsersupport) — geocodezip, Nov 28 '15 at 18:38
An update was recently released to the API: ([Release Notes](https://developers.google.com/maps/documentation/javascript/releases)). You might want to avoid using the [experimental version (v3.exp)](https://developers.google.com/maps/documentation/javascript/versions) — geocodezip, Nov 28 '15 at 18:40
I am using IE 11. I also reverted back to v 3.22. It seemed to run longer but then I got the same worded error, referencing .../js/22/12a/util.js I really need this to work. — Meta Mussel, Nov 28 '15 at 19:51
What is strange is that it happens when there is NO interaction. My screen can sit idle for over a minute and then the error appears. I am asked if I want to continue running the script and I select No and it reappears instantly. — Meta Mussel, Nov 28 '15 at 20:08
Confirmed with 3.23 on Win7 x64 & IE 11. Although I can only reproduce inside an embedded web control, so the request itself might play a part. Seems like a bug with gmaps. — Tamir Daniely, Nov 30 '15 at 10:18
I made the arguments that I pass to the external procedure global and that, along with reverting back to 3.22 seemed to do the trick. — Meta Mussel, Nov 30 '15 at 22:27
I am having an exact similar issue with embeded WebControl inside a form. Did you ever find the solution for this problem? — user1829319, Jan 07 '16 at 04:00
This solution will stop working in May when Google deprecates v3.22: https://code.google.com/p/gmaps-api-issues/issues/detail?id=9004 — Zax, Mar 03 '16 at 21:19

kuma DK · Answer 1 · 2016-06-29T08:57:10.060

15

Adding the following meta tag in a header section solved this issue for me.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as.
Edge mode tells Internet Explorer to display content in the highest mode available.

edited Jun 29 '16 at 08:57

answered Apr 05 '16 at 05:28

kuma DK

1,812
1
18
36

score 4 · Answer 2 · answered May 27 '16 at 15:39

4

I also changed this tag. then work it well. thanks

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

It works both ver 3.22 & 3.23.

answered May 27 '16 at 15:39

NOSUKE

49
2

Repost .. I've posted the same answer – kuma DK Jun 29 '16 at 08:58

score 3 · Answer 3 · answered May 25 '16 at 21:10

This onion.js script error has returned, the v=3.22 no longer fixes the issue. It turns out that the problem is an issue with IE and onios.js. Embedding a web browser by default used IE7 standard and that’s the problem my fix was an addition to the registry as follows:-

[HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION]
"yourApp.exe"=dword:00002EDF

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION]
"yourApp.exe"=dword:00002EDF

[HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION]
"yourApp.exe"=dword:00002EDF

If you add the altering this is also necessary? – Lucas Steffen Sep 26 '16 at 12:29 — Lucas Steffen, Sep 26 '16 at 12:29

score 3 · Answer 4 · edited May 23 '17 at 11:54

Google launched a new release version 3.24 on May 24, 2016.

According to the versioning model, there are only three versions: frozen, release and experimental.

https://developers.google.com/maps/documentation/javascript/versions

Version 3.22 is retired and cannot be accessed anymore.

The new version supports only IE10 and IE11, the compatibility mode is unsupported.

https://developers.google.com/maps/documentation/javascript/browsersupport

WebBrowser control can default to an IE 7 rendering mode:

https://weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version

You should force the control to a newer IE version

http://www.codeproject.com/Articles/793687/Configuring-the-emulation-mode-of-an-Internet-Expl

Use latest version of Internet Explorer in the webbrowser control

Additionally, you can add the meta tag in your html

It looks like the new version of Maps JavaScript API relies on a global JSON object which is not available in IE7. So, alternatively you can try to polyfill JSON:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

score 1 · Answer 5 · answered Dec 29 '15 at 18:38

1

I was having the same error. I've just found a solution that worked for me.

I just added "&v=3.22" in the url of Google Maps. Like this:

http://maps.google.com/maps/api/js?sensor=true&v=3.22

answered Dec 29 '15 at 18:38

Giovanny Farto M.

1,557
18
20

2

Not recommended. This will stop working as google deprecates ver3.22. – kuma DK Apr 05 '16 at 05:31
I have to say that it is still working for me. Not my fault if Google deprecates this version. – Giovanny Farto M. Apr 08 '16 at 08:22
As NOSUKE said, the following tag is also necessary: – Giovanny Farto M. Jun 20 '16 at 18:31

score 1 · Answer 6 · edited Mar 21 '17 at 20:01

I was having a similar problem and the provided solution didn't work for me. I was getting the error in Delphi inside the TWebBrowser control also with the meta tag.

I figured out the problem.

Onion.js fires the error, because it calls JSON.parse.

JSON Parse isn't supported by the web browser control. You can test this by adding this to your JavaScript (already quoted for Delphi):

'var code = ''"\u2028\u2029"''; JSON.parse(code); ' +

Every browser should execute

var code = '"\u2028\u2029"';
JSON.parse(code);

When executed in Delphi it fires an error instantly.

You can avoid the whole thing with a JSON3 polyfill (already quoted for Delphi):

'<script src="https://cdn.jsdelivr.net/json3/3.3.2/json3.js"></script>'  +

Then JSON will be defined and work as expected, resolving the problem.

Google Maps Script error in Onion.js

6 Answers6

Linked