1
Answer

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

ahmed elbarbary

ahmed elbarbary
5y
465
1
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
  1. import { Component, OnInit } from '@angular/core';  
  2. import {  AfterViewInit, ViewChild, ElementRef } from '@angular/core';  
  3. import { PartDetailsService } from 'src/app/service/part-details.service';  
  4. import { Location } from '@angular/common';  
  5. import { ActivatedRoute, Router , ParamMap } from '@angular/router';  
  6. import { FmdService } from './../../service/fmd.service';  
  7. import { CompanyService } from './../../service/company.service';  
  8. @Component({  
  9.   selector: 'app-managelocations',  
  10.   templateUrl: './managelocations.component.html',  
  11.   styleUrls: ['./managelocations.component.css']  
  12. })  
  13.   
  14.   
  15. export class ManagelocationsComponent implements OnInit,AfterViewInit {  
  16.   PartId: number;  
  17.   LocationId:number;  
  18.   lat2:number;  
  19.   lng2:number;  
  20.   public data: any;  
  21.   public dataLocation: any;  
  22.   title = 'angular-gmap';  
  23.   @ViewChild('mapContainer') gmap: ElementRef;  
  24.   map: google.maps.Map;     
  25.   constructor(public partDetailsService: PartDetailsService  
  26.     , public companyService: CompanyService  
  27.     , private location: Location  
  28.     , public router: Router  
  29.     , private route: ActivatedRoute  
  30.     , private fmdService: FmdService) {  
  31.       //this.route.queryParams.subscribe(params => {  
  32.         //this.PartId = params['PartId'];   
  33.    //});  
  34.   
  35.   
  36.   
  37.   }  
  38.   ngOnInit() {  
  39.   
  40.   
  41.   }  
  42.   ngAfterViewInit() {  
  43.     this.mapInitializer();  
  44.   }  
  45.   mapInitializer() {  
  46.     //============================assign latitude and longtude=======  
  47.     this.route.queryParams.subscribe(params => {  
  48.   
  49.       this.PartId=this.partDetailsService.currentData.PID;  
  50.   
  51.   
  52.      console.log("ManageLocations" + this.PartId);  
  53.       if (this.PartId != undefined || this.PartId != null)  
  54.        {  
  55.           
  56.            this.data=this.partDetailsService.currentData;  
  57.             console.log(this.partDetailsService.currentData);  
  58.            this.LocationId= this.data.Locations[0]['Loc'];  
  59.            console.log(this.LocationId.toString());  
  60.   
  61.            
  62.         //get location id from parts data  
  63.   
  64.         //get locations====================  
  65.         this.partDetailsService.getLocationData(this.LocationId).subscribe(res => {          
  66.           this.dataLocation = res['_source']['GPS1'];     
  67.           var loc = this.dataLocation.split(',');      
  68.           this.lat2 = loc[0].trim();    
  69.           this.lng2 = loc[1].trim();    
  70.           console.log("Lat is " + this.lat2 )  
  71.           console.log("Lng is " + this.lng2 )  
  72.         }         
  73.         );          
  74.       
  75.         //=================================  
  76.          
  77.       }  
  78.   
  79.     });  
  80.     console.log("Lat2 is " + this.lat2 )  
  81.     console.log("Lng2 is " + this.lng2 )  
  82.     //=========================  
  83.  
  84.     var lat=this.lat2;  
  85.     var lng=this.lng2;  
  86.     console.log("Lat is " + lat )  
  87.     console.log("Lng is " + lng )  
  88.     const coordinates = new google.maps.LatLng(lat ,lng);  
  89.     //const coordinates = new google.maps.LatLng(40.73061, -73.935242);  
  90.     const mapOptions: google.maps.MapOptions = {  
  91.       center: coordinates,  
  92.       zoom: 8  
  93.     };  
  94.   
  95.     const marker = new google.maps.Marker({  
  96.       position: coordinates,  
  97.       title: 'Hello World!'  
  98.     });  
  99.   
  100.     const map = new google.maps.Map(this.gmap.nativeElement, mapOptions);  
  101.     marker.setMap(map);  
  102.   }  
  103.   
  104. }  
 
Answers (1)
Next Recommended Forum