MarkerWithLabel does not inherit from MVCObject

[jeantimex]

Steps to reproduce

1. Go to https://jsfiddle.net/z8ha9cbL/5/
2. An infowindow is supposed to be opened on top of the marker, but it's not.

Code example

function extend(type1, type2) {
  // eslint-disable-next-line prefer-const
  for (let property in type2.prototype) {
    type1.prototype[property] = type2.prototype[property];
  }
}

class MarkerSafe {
  constructor(options) {
    // Correctly set the prototype chain for instance methods.
    // This allows instances of MarkerSafe (and its children) to inherit
    // methods like 'get' and 'set' from google.maps.Marker (and thus MVCObject).
    //Object.setPrototypeOf(MarkerSafe.prototype, google.maps.Marker.prototype);

    // Current code
    extend(MarkerSafe, google.maps.Marker);

    // extend(MarkerSafe, google.maps.Marker);
    google.maps.Marker.call(this, options);
  }
}

class MarkerWithLabel extends MarkerSafe {
  constructor(options) {
    super(options);
  }
}

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  const marker = new MarkerWithLabel({
    position: myLatLng,
    map,
  });

  console.log(marker instanceof google.maps.MVCObject);

  const infoWindow = new google.maps.InfoWindow({
    content: 'Hello',
  });

  infoWindow.open({anchor: marker, map});
}

Stack trace

MarkerWithLabel is not heriting from google.maps.MVCObject.

That's a classic JavaScript inheritance pattern issue when trying to mix modern class syntax with older prototype-based inheritance, especially when dealing with external libraries like the Google Maps API.

The problem is that the extend function only copies methods from type2.prototype to type1.prototype (the MarkerSafe prototype), but it doesn't correctly establish the prototype chain required for true inheritance, particularly for google.maps.MVCObject.

The best way to fix this while keeping your class structure is to use Object.setPrototypeOf() and ensure the base class constructor is called correctly.

Following these steps will guarantee the quickest resolution possible.

Thanks!

[jeantimex]

Here is the correct extend function:

function extend(child, parent) {
  // 1. Set the child's prototype to inherit from the parent's prototype.
  // This ensures methods are correctly looked up on the parent's prototype chain
  // (e.g., MVCObject methods).
  Object.setPrototypeOf(child.prototype, parent.prototype);

  // 2. Set the static inheritance. This allows the child class to inherit
  // static methods from the parent class (though often not needed for maps objects).
  Object.setPrototypeOf(child, parent);
}