Q:

Use Google maps NodeJS geocode callback function results to draw map on AngularJS 2 component template

Hi all I am using the googles maps nodejs client web api and would like to display a map on my HTMLviews through AngularJS 2.
I have this server export that returns an object to my AngularJS2 client service
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}); 

    }
});
}

The Angular2 services looks like this 
@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);
}

Everything seems to be fine, I get the expected response from the server, now i would like to use this response to draw a map on my component template.
And then here is my AngularJS2 component
@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();
}
}

A:

I have used the angular2-google-maps package, i now have this In my component class
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);  
        })
}

And have this in my 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>

I have also updated my app module by importing the module and  passed it the api key
import { AgmCoreModule } from 'angular2-google-maps/core'; 

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

You can read through the angular2-google-maps here

