Thiết kế website giá rẻ

Question

I have a NextJS application with Google Maps API. (but not really relying on the vis.gl library, as for my purposes I need to be object-oriented here)
I am calling my MainClass from a component.

The MainClass (that extends google.maps.OverlayView) is wrapped in a function initGoogleMapsLibraries() that initializes all needed libraries.
I have no error here.

Howewer the MainClass owns other classes that extend google.maps.MVCObject

When instantiating these classes, I get the "google is undefined" Error.

async function initGoogleMapsLibraries(apiKey) {
  ((g) => {
    var h,
      a,
      k,
      p = "The Google Maps JavaScript API",
      c = "google",
      l = "importLibrary",
      q = "__ib__",
      m = document,
      b = window;
    b = b[c] || (b[c] = {});
    var d = b.maps || ((b.maps = {})),
      r = new Set(),
      e = new URLSearchParams(),
      u = () =>
        h ||
        (h = new Promise(async (f, n) => {
          await (a = m.createElement("script"));
          e.set("libraries", [...r] + "");
          for (k in g)
            e.set(
              k.replace(/[A-Z]/g, (t) => "_" + t[0].toLowerCase()),
              g[k]
            );
          e.set("callback", c + ".maps." + q);
          a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
          d[q] = f;
          a.onerror = () => (h = n(Error(p + " could not load.")));
          a.nonce = m.querySelector("script[nonce]").nonce || "";
          m.head.append(a);
        }));
    d[l]
      ? console.warn(p + " only loads once. Ignoring:", g)
      : (d[l] = (f, ...n) =>
          r.add(f) && u().then(() => d[l](f, ...n)));
  })({
    key: apiKey,
    v: "weekly",
  });

  await Promise.all([
    google.maps.importLibrary("core"),
    google.maps.importLibrary("marker"),
    google.maps.importLibrary("maps"),
    google.maps.importLibrary("routes"),
  ]);
}
class PointsManager extends google.maps.MVCObject {
  constructor() {
    super();
  }
}

async function initOverlayRender() {
  await initGoogleMapsLibraries("AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk");

  class MainClass extends google.maps.OverlayView {
    points;
    constructor() {
      super();
      this.points = new PointsManager();
    }
  }
  return new MainClass();
  }

<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk", v: "beta"});</script>

Now with function around the class extending MVCObject:

async function initGoogleMapsLibraries(apiKey) {
  ((g) => {
    var h,
      a,
      k,
      p = "The Google Maps JavaScript API",
      c = "google",
      l = "importLibrary",
      q = "__ib__",
      m = document,
      b = window;
    b = b[c] || (b[c] = {});
    var d = b.maps || ((b.maps = {})),
      r = new Set(),
      e = new URLSearchParams(),
      u = () =>
        h ||
        (h = new Promise(async (f, n) => {
          await (a = m.createElement("script"));
          e.set("libraries", [...r] + "");
          for (k in g)
            e.set(
              k.replace(/[A-Z]/g, (t) => "_" + t[0].toLowerCase()),
              g[k]
            );
          e.set("callback", c + ".maps." + q);
          a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
          d[q] = f;
          a.onerror = () => (h = n(Error(p + " could not load.")));
          a.nonce = m.querySelector("script[nonce]").nonce || "";
          m.head.append(a);
        }));
    d[l]
      ? console.warn(p + " only loads once. Ignoring:", g)
      : (d[l] = (f, ...n) =>
          r.add(f) && u().then(() => d[l](f, ...n)));
  })({
    key: apiKey,
    v: "weekly",
  });

  await Promise.all([
    google.maps.importLibrary("core"),
    google.maps.importLibrary("marker"),
    google.maps.importLibrary("maps"),
    google.maps.importLibrary("routes"),
  ]);
}
function points(){
class PointsManager extends google.maps.MVCObject {
  constructor() {
    super();
  }
}
return new PointsManager()
}

async function initOverlayRender() {
  await initGoogleMapsLibraries("AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk");

  class MainClass extends google.maps.OverlayView {
    points;
    constructor() {
      super();
      this.points = points();
    }
  }
  return new MainClass();
}

<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk", v: "beta"});</script>

The difference between the snippets only is the points() function around the class that gives an Error when instantiated.
(it is expected, that there is no map btw, I just want to run the code)

Problems & Solutions:

I know that I added the wrapper around MainClassto get rid of this kind of error.

I know that it works to do the same for the other classes.

BUT, I dont think it its optimal. Wrapping inside the function shadows the class to outer scopes. (I can’t export the class)

Questions:

Is that the only way to fix this error?

And why does it not work without the wrapper?

I am trying to understand the technical details.

Thiết kế website giá rẻ

Danh mục

MyClass extends google.maps.MVCObject (or any Class) results in “google is not defined” error