Google maps in Ionic2 application

Question

I am building an Ionic2 app in which I have a google map. I need to:

1. Draw a polygon
2. calculate it's area
3. should be able to delete the polygon

I basically need exactly the same solution as here: calculate area of a drawn polygon on google map javascript

So far I converted entire code in typescript and it's almost working. However there is one issue:

• When I am finished drawing the polygon for the first time, the area is shown on the UI. If at this point, I modify my shape the area is not updated. see the gif image.
• If I click anywhere on the map and then then again on the drawn shape and modify it, it's area is calculated for each successive modification.

What am I doing wrong?

My component code:

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

    });

  }

}

Answer 1

Your mistake is located here:

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

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

You don't call setSelection function. It is the same as:

function () {
  this.setSelection(newShape);
};

You need to use the following:

this.setSelection(newShape);

See also the working plunker