googlemaps / googlemaps/js-markerwithlabel
MarkerWithLabel does not inherit from MVCObject
- 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
Assessment
This issue has not been assessed yet.