2017-03-19 22 views
1

我必須在我的應用程序中映射。第一個登錄後出現並完美工作。第二個被放置在另一組件,而實例化收到錯誤Angular 2無法讀取屬性'地圖'的初始第二張地圖

EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'maps' of undefined 

在谷歌地圖腳本被放置在index.html和在這兩種情況下我使用ngOnInit方法來創建地圖。

如果一張地圖有效並且第二張不能...?

//imports 
var google: any; 

@Component({ 
    selector: 'app-friend-latest-position', 
    templateUrl: 'friend-latest-position.component.html', 
    styleUrls: ['friend-latest-position.component.css'] 
}) 
export class FriendLatestPositionComponent implements OnInit,AfterViewInit { 

    private location: Location = new Location(); 
    private email: string; 
    private hasLocation: boolean = false; 


    constructor(private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
    this.email = this.route.snapshot.params['email']; 
    } 

    ngAfterViewInit(): void { 
    this.getSelectedUser(); 
    } 


    getSelectedUser() { 
    // fetching data 
    this.initMap(); 
    } 

    initMap() { 
    const loc = {lat: this.location.latitude, lng: this.location.longitude}; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 7, 
     center: loc 
    }); 
} 
+1

你應該添加代碼,你怎麼稱呼它 – PierreDuc

+0

在標準的方式就像在谷歌開發頁面https://developers.google.com/maps/documentation/javascript/tutorial –

+0

那麼,你應該實例化一個地圖ngAfterViewInit因爲那是在文檔中添加和使用組件元素的時候 – PierreDuc

回答

0

你應該寫

declare const google: any; 

或安裝谷歌地圖分型

npm install @types/google-maps --save-dev 

如果使用var當前的谷歌對象被將輸出文件的範圍內覆蓋。

相關問題