map display empty although i assign values to lat and lng ?

Question

I work on angular 7

 

I assign values of lng and lat on function and map display empty why and how to solve problem

 

const coordinates = new google.maps.LatLng(lat ,lng);

 

map not display

 

if i make map as following it work

 

//const coordinates = new google.maps.LatLng(40.73061, -73.935242);

 

the below not working although lat and lng have initial values

 

const coordinates = new google.maps.LatLng(lat ,lng);

 

why and how to solve problem

import { Component, OnInit } from '@angular/core';
import {  AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { PartDetailsService } from 'src/app/service/part-details.service';
import { Location } from '@angular/common';
import { ActivatedRoute, Router , ParamMap } from '@angular/router';
import { FmdService } from './../../service/fmd.service';
import { CompanyService } from './../../service/company.service';
@Component({
  selector: 'app-managelocations',
  templateUrl: './managelocations.component.html',
  styleUrls: ['./managelocations.component.css']
})


export class ManagelocationsComponent implements OnInit,AfterViewInit {
  PartId: number;
  LocationId:number;
  lat2:number;
  lng2:number;
  public data: any;
  public dataLocation: any;
  title = 'angular-gmap';
  @ViewChild('mapContainer') gmap: ElementRef;
  map: google.maps.Map;
  constructor(public partDetailsService: PartDetailsService
    , public companyService: CompanyService
    , private location: Location
    , public router: Router
    , private route: ActivatedRoute
    , private fmdService: FmdService) {
      //this.route.queryParams.subscribe(params => {
        //this.PartId = params['PartId'];
   //});



  }
  ngOnInit() {


  }
  ngAfterViewInit() {
    this.mapInitializer();
  }
  mapInitializer() {
    //============================assign latitude and longtude=======
    this.route.queryParams.subscribe(params => {

      this.PartId=this.partDetailsService.currentData.PID;


     console.log("ManageLocations" + this.PartId);
      if (this.PartId != undefined || this.PartId != null)
       {

           this.data=this.partDetailsService.currentData;
            console.log(this.partDetailsService.currentData);
           this.LocationId= this.data.Locations[0]['Loc'];
           console.log(this.LocationId.toString());


        //get location id from parts data

        //get locations====================
        this.partDetailsService.getLocationData(this.LocationId).subscribe(res => {
          this.dataLocation = res['_source']['GPS1'];
          var loc = this.dataLocation.split(',');
          this.lat2 = loc[0].trim();
          this.lng2 = loc[1].trim();
          console.log("Lat is " + this.lat2 )
          console.log("Lng is " + this.lng2 )
        }
        );

        //=================================

      }

    });
    console.log("Lat2 is " + this.lat2 )
    console.log("Lng2 is " + this.lng2 )
    //=========================

    var lat=this.lat2;
    var lng=this.lng2;
    console.log("Lat is " + lat )
    console.log("Lng is " + lng )
    const coordinates = new google.maps.LatLng(lat ,lng);
    //const coordinates = new google.maps.LatLng(40.73061, -73.935242);
    const mapOptions: google.maps.MapOptions = {
      center: coordinates,
      zoom: 8
    };

    const marker = new google.maps.Marker({
      position: coordinates,
      title: 'Hello World!'
    });

    const map = new google.maps.Map(this.gmap.nativeElement, mapOptions);
    marker.setMap(map);
  }

}