Карты Google в приложении Ionic2

Я создаю приложение Ionic2, в котором у меня есть карта Google. Мне нужно:

1. Нарисовать многоугольник
2. вычислить его площадь
3. должна быть возможность удалить полигон

В основном мне нужно точно такое же решение, как здесь: вычислить площадь нарисованного многоугольника на карте google javascript

Пока я преобразовал весь код в машинописный текст, и он почти работает. Однако есть одна проблема:

• Когда я заканчиваю рисовать многоугольник в первый раз, область отображается в пользовательском интерфейсе. Если в этот момент я изменю свою форму, область не обновится. см. GIF-изображение.
• Если я щелкну где-нибудь на карте, а затем снова на нарисованной фигуре и изменю ее, ее площадь будет вычисляться для каждой последующей модификации.

Что я делаю неправильно?

Код моего компонента:

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';


@Component({
  templateUrl: 'build/pages/start/start.html'
})

export class StartPage {

  selectedShape: any;

  constructor( private navController : NavController, private platform : Platform) {

    this.initializeMap();

  }

  clearSelection = (shape): void => {

    if(shape) {
      shape.setEditable(false);
      shape = null;
      this.selectedShape=shape
    }
  }

  setSelection = (shape): void => {

    this.clearSelection(shape);
    var shape = shape;
    this.selectedShape=shape;

    console.log(shape.getPath())

    shape.setEditable(true);
    google.maps.event.addListener(shape.getPath(), 'set_at', ()=>{this.calcar(shape)});
    google.maps.event.addListener(shape.getPath(), 'insert_at', ()=>{this.calcar(shape)});
  }

  calcar= (shape): void => {

    var shape = shape

    var area = google.maps.geometry.spherical.computeArea(shape.getPath());
    document.getElementById("area").innerHTML = "Area =" + area.toFixed(2);

    this.selectedShape=shape
  }

  deleteSelectedShape = (): void => {

    if (this.selectedShape) {
      this.selectedShape.setMap(null);
    }
  }

  initializeMap = (): void => {

    var newShape
    var map
    var drawingManager

    this.platform.ready().then(() => {
      var minZoomLevel = 15;

      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: minZoomLevel,
        center: new google.maps.LatLng(52.5200, 13.4050),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        zoomControl: true    
      });

      var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true
      };

      drawingManager = new google.maps.drawing.DrawingManager({
        drawingControl: true,
        drawingControlOptions: {
          drawingModes: [
          google.maps.drawing.OverlayType.POLYGON,   
          ]
        },
        polygonOptions: polyOptions,
        map: map
      });

      google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {

        this.selectedShape=e.overlay

        if (e.type != google.maps.drawing.OverlayType.MARKER) {
      // Switch back to non-drawing mode after drawing a shape.
      drawingManager.setDrawingMode(null);

      // Add an event listener that selects the newly-drawn shape when the user
      // mouses down on it.
      newShape = e.overlay;
      newShape.type = e.type;

      google.maps.event.addListener(newShape, 'click', ()=> {

        this.setSelection(newShape);


      });

      var area = google.maps.geometry.spherical.computeArea(newShape.getPath());
      document.getElementById("area").innerHTML = "Area =" + area.toFixed(2);

      () => {this.setSelection(newShape);}
    }
  });

      google.maps.event.addListener(map, 'click',  ()=>{this.clearSelection(newShape);});
      google.maps.event.addDomListener(document.getElementById('delete-button'), 'click',  ()=>{this.deleteSelectedShape();});

    });

  }

}