1

I am attempting to create a Google Maps Overlay View. I have this code here in ES5 telling me to initialize an object in my marker prototype like below:

MainMarker.prototype = new google.maps.OverlayView();

How do I exactly convert this to ES6?

For inheritance, such as Child.prototype = Object.create(Parent.prototype), to this in ES6, we can write like 

class Child extends Parent {
    constructor () {
        super();
    }
}

But how to come about with the first one?

cs1193
  • 1,090
  • 1
  • 16
  • 28
  • maps api docs now have a complete example using OverlayView in ES6: https://developers.google.com/maps/documentation/javascript/examples/overlay-popup?hl=en – schellmax Oct 08 '20 at 07:26

1 Answers1

2

I have this code here in ES5 telling me to initialize an object in my marker prototype like below:

MainMarker.prototype = new google.maps.OverlayView();

This never was the correct way in ES51 anyway, so don't try to keep bad practises around.
Just go for

class MainMarker extends google.maps.OverlayView { … }

1: In this specific case, it doesn't make a difference whether new or Object.create is used, the API docs explicitly state that "The OverlayView constructor is guaranteed to be an empty function.". Google likely used the former syntax in their examples because it's more backwards-compatible.

Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • I don't understand the difference between `Child.prototype = Parent.prototype` vs `Child.prototype = Object.create(Parent.prototype)`, I believe `Object.create` creates a deep copy of `Parent.prototype` but does not initialize. In this case `Child.prototype = new Parent()`, does it not initialize the **Child's** prototype object? – cs1193 Jul 11 '17 at 14:18
  • Best practice or not, OP is asking specifically about ES5 – terpinmd Jul 11 '17 at 14:20
  • @cs1193 the first doesn't create a copy at all but just uses the same object. `Object.create()` does create a new object that inherits from the argument. `new Parent()` would indeed initialise the prototype object, which we don't want. See also [here](https://stackoverflow.com/a/17393153/1048572?Benefits-of-using-Object.create-for-inheritance) and [here](https://stackoverflow.com/questions/11088365/why-wouldnt-i-use-child-prototype-parent-prototype-rather-than-child-prototype-new-parent) for details – Bergi Jul 11 '17 at 14:24
  • @terpinmd He asked how to convert it to ES6. Of course one could just carry on with the same code - all ES5 is valid ES6 so no conversation necessary - but that's not what you should do. – Bergi Jul 11 '17 at 14:25
  • @Bergi @terpinmd in my case, I would like to initialize the Object `MainMarker.prototype = new google.maps.OverlayView();` to my prototype, I wouldn't want to inherit it to a another class. If that is the case, how would I do that in ES6? This is in accordance with Google Maps API - https://developers.google.com/maps/documentation/javascript/examples/overlay-simple – cs1193 Jul 11 '17 at 15:13
  • 1
    @cs1193 The ES6 equivalent of that is `const MainMarker = Object.setPrototypeOf(class { … }, new google.maps.OverlayView)`. However I've further researched the issue and am 100% certain that this is a mistake on Google's side. They explicitly state that they want you to *subclass* the `OverlayView`. I suspect they used the wrong syntax because it doesn't need ES5 `Object.create` (and works in ES3), and because it didn't matter when all overlays are singletons. – Bergi Jul 11 '17 at 18:38