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

I was on the good way it works...

import { Component } from '@angular/core';
declare const google: any;

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);
  }

  /**
   * 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';

    // Create the img element and attach it to the div.
    const img = document.createElement('img');
    img.src = this.image_;
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.position = 'absolute';
    div.appendChild(img);

    this.div_ = div;

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

  draw(){

    // We use the south-west and north-east
    // coordinates of the overlay to peg it to the correct position and size.
    // To do this, we need to retrieve the projection from the overlay.
    const overlayProjection = this.getProjection();

    // Retrieve the south-west and north-east coordinates of this overlay
    // in LatLngs and convert them to pixel coordinates.
    // We'll use these coordinates to resize the div.
    const sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    const ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

    // Resize the image's div to fit the indicated dimensions.
    const div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.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;
  };
};



/*
/*  Component Map
*/
@Component({
  selector: 'map',
  template: `
    

  `,
  styles: [
    `#map{ width:100%; height:100%; position: absolute; width:100%; height:100%; top:0; left:0;}`
  ],
})
export class MapComponent {

  overlay;

  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));

    // The photograph is courtesy of the U.S. Geological Survey.
    const srcImage = 'https://developers.google.com/maps/documentation/' +
        'javascript/examples/full/images/talkeetna.png';

    // The custom USGSOverlay object contains the USGS image,
    // the bounds of the image, and a reference to the map.
    this.overlay = new USGSOverlay(bounds, srcImage, map);
  }
}