My Ionic 4 Application using Angular 8 incorporates a google maps component where I need to draw and edit multiple polygons, eventually saving their vertices in a database. Hard coding some polygons is easy with getPath() or getPaths(), but I'm utilizing the google.maps.drawing.DrawingManager component. Extracting points through event listeners like in this discussion seems to be the only way.
google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon) => {
console.log(polygon.getPath());
});
The post suggests nesting a mouseup listener within this function, but I believe there must be a more efficient solution. Is there a way to extract data from every polygon created with the drawingManager tool in a loop-like manner? The goal is to capture all polygon instances at once upon hitting a submit button.
HTML
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Map
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div #map id="map"></div>
<ion-button (click)="submit()"> Submit</ion-button>
</ion-content>Typescript
export class HomePage {
@ViewChild('map', { static: false }) mapElement: ElementRef;
map: any;
constructor() {}
ionViewDidEnter() {
let latLng = new google.maps.LatLng(someLat, someLng);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
fullscreenControl: false
};
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
const drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon']
},
polygonOptions: {
fillColor: '#ff0000',
draggable: true,
editable: true
}
});
drawingManager.setMap(this.map);
google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon) => {
console.log(polygon.getPath());
});
}
submit() {
//Compile all polygons then
//Post to database here
}
}
I could opt for the listener method by adding to an array, but it would require handling for edited polygons after creation, which doesn't seem like good programming practice.