Loading

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

ahmed elbarbary

6y752TypeScript

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);
}
}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo6y ago
hey your code is currect .Just change the order and add map to marker object loike below
const map = new google.maps.Map(this.gmap.nativeElement, mapOptions);
const marker = new google.maps.Marker({
      map: map,
      position: coordinates,
      title: 'Hello World!'
    });


    marker.setMap(map);