location-picker.component.ts

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { environment } from 'src/environments/environment';
import { LocationService } from 'src/app/core/services/location.service';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-location-picker',
  templateUrl: './location-picker.component.html',
  styleUrls: ['./location-picker.component.scss'],
})
export class LocationPickerComponent implements OnInit, AfterViewInit {

  @ViewChild('map') mapBlock: ElementRef;
  googleMaps: any;
  newPosition: { lat: any; lng: any; };

  constructor(private location: LocationService, private modal: ModalController) { }

  ngOnInit() { }

  ngAfterViewInit() {
    this.getUserLocationAndPlot()
  }
  private getUserLocationAndPlot() {
    let coords;
    this.location.getCurrentLocation().then(
      (location) => {
        coords = { lat: location.coords.latitude, lng: location.coords.longitude };
        return this.getGoogleMaps();
      }).then((gMaps) => {
        const map = this.createMap(gMaps, coords);
        this.addMarker(coords, map);
      }).catch(
        err => console.log('error', err)
      );
  }
  private getGoogleMaps(): Promise<any> {
    const win = window as any; // fetching the window object of browser/platform
    const googleModule = win.google; // checking if google sdk was loaded
    if (googleModule && googleModule.maps) {
      return Promise.resolve(googleModule.maps); // if loaded return sdk
    }
    // else : loading the sdk in the dom
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=${environment.googleApiKey}`;
      script.async = true;
      script.defer = true;
      document.body.appendChild(script);
      script.onload = () => {
        const loadedGoogleModule = win.google;
        if (loadedGoogleModule && loadedGoogleModule.maps) {
          resolve(loadedGoogleModule.maps);
        } else {
          reject('Google maps SDK not available.');
        }
      };
    });
  }
  private createMap(gMaps, coords) {
    this.googleMaps = gMaps; // storing maps object globally
    const mapEl = this.mapBlock.nativeElement; // fetching div from ref
    const map = new gMaps.Map(mapEl, {
      center: coords,
      zoom: 20
    });
    return map;
  }
  private addMarker(coords, map) {
    // add marker on the map
    const marker = new this.googleMaps.Marker({
      position: coords,
      draggable: true,
      animation: this.googleMaps.Animation.DROP,
      map
    });
    // add event listener to track marker change
    this.googleMaps.event.addListener(marker, 'position_changed', (event) => {
      this.newPosition = {
        lat: marker.getPosition().lat(),
        lng: marker.getPosition().lng()
      };
    });
  }
  closeModal() {
    this.modal.dismiss(this.newPosition); // send updated position to parent
  }

  private addClickEventMap(map) {
    map.addListener('click', event => {
      const selectedCoords = {
        lat: event.latLng.lat(),
        lng: event.latLng.lng()
      };
      console.log(selectedCoords);
    });
  }

}