Google Maps DrawingManager is undefined in Angular

user_2162659 0
Viewed 1240

I'm trying to change few options of Google Maps drawing manager by clicking a button using Angular. But I receive error messages saying that DrawingManager variable is undefined.

I initialized Google Maps and DrawingManager in ngAfterViewInit function in an Angular Component. Google Map object and the Drawing Manager object are assigned to variables in the component as shown in the code. I want to change the few options of Drawing Manager by Clicking a button in the component. "drawControlEnable" function is called by clicking the button. But DrawingManager object is undefined inside the "drawControlEnable" function. I have put the Google Maps Script in the index.html and the code for the component.

Index.html 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXX&libraries=drawing,geometry"></script>

Angular Component

import {Component, OnInit, ViewChild, AfterViewInit} from '@angular/core';
import { } from '@types/googlemaps';

.....
.....

@ViewChild('gmap') gmapElement: any;
map: google.maps.Map;
shapes = [];
coordinatesArray = [];
drawingManager: any;

ngAfterViewInit() {
    var mapProp = {
      center: new google.maps.LatLng(7.515073, 80.723066),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);

    this.drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: null,
        drawingControl: false,
        drawingControlOptions: {
           position: google.maps.ControlPosition.TOP_CENTER,
           drawingModes: ['polygon']
        },
        markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
        polygonOptions: {
           editable: true,
           draggable: true
        }
    });
    this.drawingManager.setMap(this.map);
}
.....
.....
drawControlEnable() {
this.drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
    this.drawingManager.setOptions({drawingControl : true});
}

How I can change DrawingManager options by clicking a button?

angular google-maps javascript
1 Answers

This is how i create a map and change the drawing control option with a button: First I declare two variables: one for the map and one for the drawingManager

  theMap: any;
  drawingManager: any;

the I create the map in ngOnInit and call the drawingManager:

this.theMap = this.initMap(lat, lng);

if(this.theMap) {
      this.initDrawingManager(this.theMap)
}

the two functions for creating the map and initializing the drawing manager are:

  initMap(lat, lng) {
    let mapProp = {
      center: new google.maps.LatLng(lat, lng),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    let map = new google.maps.Map(document.getElementById("map"), mapProp);

    let marker = new google.maps.Marker({
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
      animation: google.maps.Animation.DROP,
      position: { lat: lat, lng: lng },
      map: map
    })

    return map;
  }

and

  initDrawingManager(map) {
    this.drawingManager = new google.maps.drawing.DrawingManager({
      // drawingMode: google.maps.drawing.OverlayType.MARKER,
      drawingControl: false,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: ['circle', 'polygon']
      },
      // markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
      polygonOptions: {
        draggable: true,
        editable: true
      },
      circleOptions: {
        // fillColor: '#ffff00',
        // fillOpacity: 1,
        // strokeWeight: 5,
        draggable: true,
        clickable: true,
        editable: true,
        zIndex: 1
      }
    });

    this.drawingManager.setMap(map);
  }

The function that changes the drawingControl option is:

  change() {
    this.drawingManager.setOptions({
      drawingControl: true
    });
  }

and the HTML is:

<button
   (click)="change()">
   change
</button>

By clicking the button, the drawing controls will appear on the map.

Our difference is that I create the map in ngOnInit.

user_97395150
Related