Angular2 - How to setup a google.maps.OverlayView? (translate JS prototype into Typescript)

Question

I\'d like to create a google map component that work like that : https://jsfiddle.net/gvvy5vxz/2/

It\'s based on this : https://developers.google.com/maps/documentat

Answer 1

In my case, i can not have an inner-class in the same class responsible for loading map. It took me sometime to figure out how to do it. This is how i did it

export class mapTextOverlayService {

  //Overlay is creatd in an inner-class because if it is at top-level class google maps library may not be available at the class load time
  mapTextOverlay = class extends google.maps.OverlayView {

    pos_;
    text_;
    map_;
    div_;

    constructor(pos, text, map) {
      super();
      // Initialize all properties.
      this.pos_ = pos;
      this.text_ = text;
      this.map_ = map;

      // Define a property to hold the text's div. We'll
      // actually create this div upon receipt of the onAdd()
      // method so we'll leave it null for now.
      this.div_ = null;

      // Explicitly call setMap on this overlay.
      this.setMap(map);
    }

    /**
     * onAdd is called when the map's panes are ready and the overlay has been
     * added to the map.
     */
    onAdd() {
      const div = document.createElement('div');
      div.style.borderStyle = 'none';
      div.style.borderWidth = '0px';
      div.style.position = 'absolute';

      div.innerHTML = this.text_;

      this.div_ = div;

      // Add the element to the "overlayLayer" pane.
      const panes = this.getPanes();
      panes.overlayLayer.appendChild(div);
    };

    draw() {
      // We are using bounds centre to peg it to the correct position.
      // To do this, we need to retrieve the projection from the overlay.
      const overlayProjection = this.getProjection();

      // Convert the centre coordinates of this overlay from LatLngs to pixel coordinates.
      // We'll use these coordinates to provide the dimensions of div.
      const pixelPos = overlayProjection.fromLatLngToDivPixel(this.pos_);

      const div = this.div_;
      div.style.left = pixelPos.x + 'px';
      div.style.top = pixelPos.y + 'px';
    };

    // The onRemove() method will be called automatically from the API if
    // we ever set the overlay's map property to 'null'.
    onRemove() {
      this.div_.parentNode.removeChild(this.div_);
      this.div_ = null;
    };

    onHide() {
      if (this.div_) {
        this.div_.style.visibility = 'hidden';
      } 
    };

  }

  createMapTextOverlay(pos, text, map) {
    return new this.mapTextOverlay(pos, text, map);
  }

};

And then in the component where i want to create a text overlay:

let mtos = new mapTextOverlayService();
let label = mtos.createMapTextOverlay(boundsCenter, description, this.map.mapobject);