googlemaps / googlemaps/js-markerwithlabel

MarkerWithLabel does not inherit from MVCObject

Open
#1,059 1 comment 0 reactions 0 assignees View on GitHub
triage me type: bug
Dominant language
TypeScript
Stars
77
Forks
20
PR merge metrics
No merged PRs in 30d

Description

#### 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!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.