使用するGoogleマップNodeJSジオコードコールバック関数の結果はAngularJS 2コンポーネントテンプレート

Question

こんにちは上のマップを描画するために私がグーグルを使用しています、すべてはnodejsクライアントのWeb APIをマッピングして、私はAngularJS 2.

を通じて私HTMLviewsに地図を表示したいと思います私AngularJS2クライアントサービスにオブジェクトを返します。このサーバーのエクスポートを持つAngular2サービスがこの

@Injectable() 
export class MyService { 
    constructor(private http: Http) { } 
    getMessage(): Promise<mma> { 
return this.http.get('/map-moving-agents') 
      .toPromise() 
      .then((res)=> { 
      console.dir(res.json().maps); 
       return res.json().obj; 
      }) 
      .catch(this.handleError); 
} 

すべてのように見える

const googleMapsClient = require('@google/maps').createClient({ 
key: 'AIzaSyCYcyd0vCGRY6Pq5E0u_ECTFi4I9VmUE4o' 
}); 

module.exports = (req, res) => { 
googleMapsClient.geocode({ 
    address: 'Cosmo City, Roodepoort USA street' 
}, function(err,response) { 
    if(err) { 
     console.log("There was an error geocoding the address", err) 
    } else { 
     console.log("Here is the maps response", response.json.results) 
     var obj = { 
      name: "Thabo", 
      age: 23, 
      maps: response.json.results 
     }; 
     res.json({obj}); 

    } 
}); 
} 

サーバーから予期される応答が得られました。この応答を使用して、コンポーネントテンプレートにマップを描画したいと考えています。ここ

そして、私のAngularJS2コンポーネントは

ある

@Component({ 
moduleId:module.id, 
selector: 'map-moving-agents', 
templateUrl: 'moving-agents.html', 
styleUrls: ['moving-agents.css'], 
providers: [ MyService ] 
}) 

export class MapMovingAgents implements OnInit{ 

msg : mma; 

constructor(private myService: MyService){} 
getMessage(): void { 
    this.myService.getMessage().then((res) => {  
     this.msg = res; 
     console.log(this.msg.name); 
     }) 

} 

ngOnInit(): void { 
    this.getMessage(); 
} 
} 

Answer 1

私はangular2-グーグルマップパッケージを使用していた、私は今、私のコンポーネントクラスでは

export class MapMovingAgents implements OnInit{ 
map: any; 
lat: number; 
lng: number; 
zoom: number = 18; 

constructor(private myService: MyService){} 
getMessage(): void { 
    this.myService.getMessage().then((res) => {  
     this.map = res; 
     this.lat = this.map.maps[0].geometry.location.lat; 
     this.lng = this.map.maps[0].geometry.location.lng; 
     console.log(this.lat,this.lng); 
     }) 
} 

これを持っていると私でこれを持っていますtempate

<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"> 
<sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google- map-marker> 
</sebm-google-map> 

私はまた、それをangular2-グーグルマップhere

を通してあなたが読むことができるキー

import { AgmCoreModule } from 'angular2-google-maps/core'; 

imports: [... AgmCoreModule.forRoot({ 
    apiKey: 'AIzaSyBfrAgRIoPbULcW0OLoTjvIr2h8BtMSNPY' 
})...] 

APIを通過したモジュールと