5

I'm trying to figure out an issue with Google Maps v3 and a polyfill we use for non-ES6 browsers (IE11 for example). The error we get is:

This site overrides Array.from() with an implementation that doesn't support iterables, which could cause Google Maps JavaScript API v3 to not work correctly.

The polyfill is: ( from https://vanillajstoolkit.com/polyfills/arrayfrom/ )

if (!Array.from) {
  Array.from = (function () {
    var toStr = Object.prototype.toString;
    var isCallable = function (fn) {
      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
    };
    var toInteger = function (value) {
      var number = Number(value);
      if (isNaN(number)) { return 0; }
      if (number === 0 || !isFinite(number)) { return number; }
      return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
    };
    var maxSafeInteger = Math.pow(2, 53) - 1;
    var toLength = function (value) {
      var len = toInteger(value);
      return Math.min(Math.max(len, 0), maxSafeInteger);
    };

    // The length property of the from method is 1.
    return function from(arrayLike/*, mapFn, thisArg */) {
      // 1. Let C be the this value.
      var C = this;

      // 2. Let items be ToObject(arrayLike).
      var items = Object(arrayLike);

      // 3. ReturnIfAbrupt(items).
      if (arrayLike == null) {
        throw new TypeError('Array.from requires an array-like object - not null or undefined');
      }

      // 4. If mapfn is undefined, then let mapping be false.
      var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
      var T;
      if (typeof mapFn !== 'undefined') {
        // 5. else
        // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
        if (!isCallable(mapFn)) {
          throw new TypeError('Array.from: when provided, the second argument must be a function');
        }

        // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
        if (arguments.length > 2) {
          T = arguments[2];
        }
      }

      // 10. Let lenValue be Get(items, "length").
      // 11. Let len be ToLength(lenValue).
      var len = toLength(items.length);

      // 13. If IsConstructor(C) is true, then
      // 13. a. Let A be the result of calling the [[Construct]] internal method
      // of C with an argument list containing the single item len.
      // 14. a. Else, Let A be ArrayCreate(len).
      var A = isCallable(C) ? Object(new C(len)) : new Array(len);

      // 16. Let k be 0.
      var k = 0;
      // 17. Repeat, while k < len… (also steps a - h)
      var kValue;
      while (k < len) {
        kValue = items[k];
        if (mapFn) {
          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
        } else {
          A[k] = kValue;
        }
        k += 1;
      }
      // 18. Let putStatus be Put(A, "length", len, true).
      A.length = len;
      // 20. Return A.
      return A;
    };
  }());
}

This works fine on other pages - but for some reason Google Maps seems to have an issue with it!

Even more frustratingly, is that it then breaks one of my other plugins (a lazy load script), which works fine until the Google map stuff is loaded

Any ideas on what its moaning about, and how to fix it?

If you have IE11 or a VM, you can test it at: https://www.chambresdhotes.org/Detailed/1768.html (click on the map at the bottom of the page, and this will load the Google Map - but then you get this annoying error, and it breaks the lazyload scrolling after)

Thanks!

Andrew Newby
  • 4,941
  • 6
  • 40
  • 81
  • 4
    I'm sorry, but who downvoted this, and marked it as "close" ? Why? Its a perfectly valid question and with no answer as far as I can see! – Andrew Newby Jan 20 '20 at 08:30
  • I did not, but this issue appears to have been reported before so that may be why you were downvoted. Please check out https://stackoverflow.com/questions/58158510/google-maps-javascript-api-v3-to-not-work-correctly – evan Jan 29 '20 at 12:56
  • @evan possibly, but not everyone can spot an issue in someone else's post. I searched around for ages to see about this issue. I ended up giving up with Google Maps on IE11, and creating a fallback to another map system (Leaflet JS). – Andrew Newby Jan 29 '20 at 16:05
  • 1
    Of course, I understand, I don't ever downvote myself. And glad to hear you sorted it out using a different map provider. :) – evan Jan 29 '20 at 16:13

1 Answers1

0

Hello Maps JavaScript API Customers, We’re writing to let you know that Maps JavaScript API passive support for older browser versions will cease with version 3.53. What do I need to know? We are updating the Maps JavaScript API to allow for ECMAScript 2020 (ES11) features, in order to ensure that the API remains as performant and lightweight as possible. To this effect, namespace-contained polyfills will no longer be automatically included for JavaScript features up to ES11-level. To the best of our knowledge, Chrome, Edge, and Firefox all support ES11-introduced features from version 80. Safari supports ES11 from version 14.1. Please note that all these browser versions are 2-3 years old and already unsupported. What do I need to do? If your users use recent versions of the supported browsers, there is nothing for you to do. Otherwise, you may need to hold off using the Maps JavaScript API version 3.53 and above for the time being. Alternatively, please ensure that your applications and web pages proactively include polyfills to allow for ES11-level JavaScript dependencies. You can already test this change on your applications and web pages by loading the API using the beta channel, with v=beta. Version schedule Please note that exceptionally, the quarterly version update will be performed in late April 2023, instead of mid-May. Version 3.53 will be loaded into the weekly channel in late April 2023 and in the quarterly channel in August 2023. You can specify v=3.52 in your loading URL before those dates if necessary. This is effective only until version 3.52 is decommissioned, in February 2024.

Stan
  • 1