title: Angular2 - How to setup a google.maps.OverlayView? (translate JS prototype into Typescript)
body: <p>I'd like to create a google map component that work like that :
  <a href="https://jsfiddle.net/gvvy5vxz/2/" rel="nofollow">https://jsfiddle.net/gvvy5vxz/2/</a></p>
  
  <p>It's based on this : <a href="https://developers.google.com/maps/documentation/javascript/examples/overlay-simple" rel="nofollow">https://developers.google.com/maps/documentation/javascript/examples/overlay-simple</a></p>
  
  <p>I'm new to typescript and i'm stuck with the prototype implementation, specially with this JS snippet:</p>
  
  <pre><code>USGSOverlay.prototype = new google.maps.OverlayView();
  
  USGSOverlay(bounds, image, map) {
  
      // Initialize all properties.
      this.bounds_ = bounds;
      this.image_ = image;
      this.map_ = map;
  
      // Define a property to hold the image'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);
    }
  </code></pre>
  
  <p>I have no clue how to translate that in a typescript way and how to declare things properly. </p>
  
  <p>I guess I should create a class USGSOverlay that extends google.maps.OverlayView but it doesn't work. </p>
  
  <pre><code>class USGSOverlay extends google.maps.OverlayView{
  
    bounds_;
    image_;
    map_;
    div_;
  
    constructor(bounds, image, map){
      // Initialize all properties.
      this.bounds_ = bounds;
      this.image_ = image;
      this.map_ = map;
  
      // Define a property to hold the image'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);
    }
  }
  </code></pre>
  
  <p>This my working base component. It creates a simple map inside #map:</p>
  
  <pre><code>import { Component } from '@angular/core';
  declare const google: any;
  /*
  /*  Component Map
  */
  @Component({
    selector: 'map',
    template: `
      &lt;div id="map"&gt;&lt;/div&gt;
    `,
    styles: [
      `#map{ width:100%; height:100%; position: absolute; width:100%; height:100%; top:0; left:0;}`
    ],
  })
  export class MapComponent {
  
    ngOnInit(){
      google.maps.event.addDomListener(window, 'load', this.initMap);
    }
  
    initMap() {
  
      const map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: {lat: 62.323907, lng: -150.109291},
        mapTypeId: google.maps.MapTypeId.SATELLITE
      });
  
      const bounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(62.281819, -150.287132),
          new google.maps.LatLng(62.400471, -150.005608));
    }
  }
  </code></pre>