CODEWITHSUNDEEP
angulartypescriptgoogle-maps-api-3event-binding
Bhargava Gopi
Bhargava Gopi

Reputation: 1

How to bind click functions in infowindow of google maps in angular 8?

I'm trying to bind a click function from a button in the infowindow of google map, but the function is not triggering.

export class MapComponent implements OnInit, OnDestroy {

    @Input() isSideBarClosed: boolean = false;

    latitude: number = 0;
    longitude: number = 0;
    isSearched: boolean = false;
    locationNotAvailable: boolean = false;

    buildingName: string = '';
    description: string = '';

    infoWindow: google.maps.InfoWindow;
    marker: google.maps.Marker;

    private destroy$ = new Subject();


    constructor(private geolocationService: GeolocationService,
                private zone: NgZone,
                private renderer: Renderer2) {
    }

    ngOnInit(): void {
        window['angularComponentRef'] = { component: this, zone: this.zone };
    }

    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }

    initMap(zoom?): void {
 

        google.maps.event.addListener(map, 'rightclick', (event: any) => {
            this.addMarker(event.latLng, map);
        });
    }

    addMarker(location: any, map: any) {
        this.marker = new google.maps.Marker({
            position: location,
            map: map,
        });

        if (!this.infoWindow) {
            this.infoWindow = new google.maps.InfoWindow();
        }
        this.infoWindow.setContent(this.getInfoWindowContent());

        google.maps.event.addListenerOnce(this.infoWindow, 'closeclick', () => {
            this.onCancel(); // Call onCancel when the InfoWindow is closed
        });

        this.infoWindow.open(map, this.marker);
        
    }

    getInfoWindowContent(): string {
        return `
        <div class="info-window-content">
        <form>
          <div class="mb-3">
            <label for="buildingName" class="form-label">Building Name:</label>
            <input [(ngModel)]="buildingName" name="buildingName" type="text" class="form-control" />
          </div>
  
          <div class="mb-3">
            <label for="description" class="form-label">Description:</label>
            <textarea [(ngModel)]="description" name="description" class="form-control"></textarea>
          </div>
  
          <div class="text-center">
            <button type="button" class="btn btn-primary" (click)="onSave()">Save</button>
            <button type="button" class="btn btn-secondary" (click)="window.angularComponentRef.zone.run(() =>{window.angularComponentRef.component.onCancel()})">Cancel</button>
          </div>
        </form>
      </div>
        `;
    }


    onCancel() {
        // Check if the marker exists
        if (this.marker) {
            // Remove the marker from the map
            this.marker.setMap(null);
        }

        // Check if the InfoWindow exists
        if (this.infoWindow) {
            // Close the InfoWindow
            this.infoWindow.close();
        }
    }

}

I need the onCancel() to be called when I click on cancel button on the info window. I've tried using view child, renderer, ng zone, event listeners and all but none of them is working. Even for the save button, I need to do the same thing.

Upvotes: 0

Views: 57

Answers (0)

Related Questions