PrimeNG GMap component is not showing map when passing lat and long from variable

Question

I am building Angular 9 app along with PrimeNG 9 with a GMap component.

When I load the GMap with static values of lat and long I could see the map but when I get the lat and long from Variable, It doesn't show anything. No console errors it is simply blank

In component.ts file:

import { Component, OnInit } from '@angular/core';
declare var google: any;

@Component({
    selector: 'app-converter',
    templateUrl: './converter.component.html',
    styleUrls: ['./converter.component.scss'],
})
export class ConverterComponent implements OnInit {
    property1 = '1669289.06';
    property2 = '5646360.56';
    latitude: number;
    longitude: number;
    options: any;

    overlays: any[];
    constructor() {}




 displayMap() {
            this.options = {
                center: {
                    lat: this.latitude,
                    lng: this.longitude,
                },
                zoom: 12,
            };
            console.log(555, this.latitude, this.longitude);
            this.overlays = [
                /*    new google.maps.Marker({
            position: { lat: -37.6878, lng: 176.1651 },
            title: 'Tauranga',
        }),*/

                new google.maps.Circle({
                    center: {
                        lat: this.latitude,
                        lng: this.longitude,
                    },
                    fillColor: '#FFA726',
                    fillOpacity: 0.35,
                    strokeWeight: 1,
                    radius: 1500,
                }),
            ];
        } }

One of my other converter function is holding lat and long value and I have converted the string to Number.

In Console:

Note: In index.html I am loading my Google maps script along with proper API key.

Please help.

Answer 1

The ngOnInit method is executed right after the component is loaded, which happens before you type in any coordinate in the inputs, so that's why the typed-in coordinates aren't reflected on the map. Try doing something like this for example:

Add (click)="updateMap()" to the button:

<button pButton type="button" label="Display Map" class="ui-button-raised" (click)="updateMap()"></button>

Add #gmap (onMapReady)="setMap($event)" to the map element:

<p-gmap #gmap (onMapReady)="setMap($event)"
    [options]="options"
    [overlays]="overlays"
    [style]="{ width: '100%', height: '420px' }"
></p-gmap>

Add map: google.maps.Map;, setMap and updateMap functions to the AppComponent:

export class AppComponent implements OnInit {
  name = "Primeng Gmap component";
  latitude;
  longitude;
  options: any;
  overlays: any[];
  receivedLatLong;
  map: google.maps.Map;

  setMap(event) {
    this.map = event.map;
  }

  updateMap() {
    if (this.latitude && this.longitude) {
      this.map.setCenter({
        lat: Number(this.latitude),
        lng: Number(this.longitude)
      });
    }
  }

  ngOnInit() {
    this.options = {
      center: {
        lat: -37.6878,
        lng: 176.1651
      },
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    console.log(555, +this.latitude, +this.longitude);
    console.log(666, this.options);

    this.overlays = [
      new google.maps.Circle({
        center: {
          lat: -35.131889,
          // lat: this.latitude,
          lng: 173.438361
          // lng: this.longitude,
        },
        fillColor: "#FFA726",
        fillOpacity: 0.35,
        strokeWeight: 1,
        radius: 1500
      })
    ];
  }
}

Now if you type in some coordinates and click on the blue button, the map's center will change to that of the chosen coordinates.

Hope this helps!