map component code review

map.component.ts

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { SEOService } from '@services/seo.service';
import { } from 'googlemaps';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})

export class MapComponent implements OnInit, AfterViewInit {

  @ViewChild('mapContainer', { static: false }) gmap: ElementRef;

  map: google.maps.Map;

  mapStyle = [
    {
      'elementType': 'labels.icon',
      'stylers': [
        {
          'visibility': 'off'
        }
      ]
    },
    {
      'featureType': 'poi.medical',
      'elementType': 'labels.icon',
      'stylers': [
        {
          'visibility': 'off'
        }
      ]
    }
  ];

  myLatLng = { lat: 36.770971, lng: 34.564114 };
  markers = [];

  mapOptions: google.maps.MapOptions = {
    center: this.myLatLng,
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  labelIndex = 0;

  constructor(
    private snackBar: MatSnackBar,
    private seoService: SEOService
  ) { }

  ngOnInit() {
    const title = `MAP | BIOCIDAL`;
    this.seoService.createMetaData(title, title);
    this.seoService.meta.updateTag({ name: 'robots', content: 'noindex' });
    // this.getCurrentPosition();
  }

  ngAfterViewInit() {
    this.mapInitializer();
  }

  getMarkerUniqueId(lat: number, lng: number) {
    return lat + '_' + lng;
  }

  addMarker(latLng, map) {
    const lat = latLng.lat();
    const lng = latLng.lng();
    const markerId = this.getMarkerUniqueId(lat, lng);
    const marker = new google.maps.Marker({
      position: latLng,
      label: this.labels[this.labelIndex++ % this.labels.length],
      map: map
    });

    marker['markerId'] = markerId;
    // cached markers
    this.markers[markerId] = marker; // like a push
    console.log(this.markers);
    this.bindMarkerEvents(marker); // bind right click event to marker

    marker.addListener('click', event => {
      console.log('marker click:');
    });
  }

  // marker right click delete
  bindMarkerEvents(marker) {
    google.maps.event.addListener(marker, 'dblclick', (point) => {
      const markerId = this.getMarkerUniqueId(point.latLng.lat(), point.latLng.lng()); // get marker id by using clicked point's coordinate
      const removeMarker = this.markers[markerId]; // find marker
      this.removeMarker(removeMarker, markerId); // remove it
    });
  }

  removeMarker(marker, markerId) {
    marker.setMap(null); // set markers setMap to null to remove it from map
    delete this.markers[markerId]; // delete marker instance from markers object
    console.log(this.markers);
  }

  mapInitializer() {
    this.map = new google.maps.Map(this.gmap.nativeElement, this.mapOptions);
    this.map.set('styles', this.mapStyle);
    // map click listener
    google.maps.event.addListener(this.map, 'click', (event) => {
      this.addMarker(event.latLng, this.map);
    });
    // marker click event
    this.marker.addListener('click', event => {
      console.log('marker event:', event);
    });
    // window load event
    google.maps.event.addDomListener(window, 'load', function () {
    });
  }

  getCurrentPosition(): void {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        const longitute = position.coords.longitude;
        const latitude = position.coords.latitude;
        console.log(longitute, latitude);
      });
    } else {
      console.log('Your browser does not support GeoLocation!');
    }
  }


  markerButton() {
    console.log('marker button clicked!');
  }
  handleError(error: any) {
    return error.error.message;
  }

  openSnackBar(text: string) {
    return this.snackBar.open(text, '', { horizontalPosition: 'right', verticalPosition: 'top', duration: 3000 });
  }
}