Angular 2 Google Map with Multiple Markers - google-maps

Question

I'm currently developing an Angular2 project which using Google Maps.
I'm trying to display the markers and multiple markers around the area.
I've got the map working but can't seem to marker.
<div class="google-maps"></div>
constructor(private _elementRef:ElementRef) {
}
ngAfterViewInit() {
let el = this._elementRef.nativeElement.querySelector('.google-maps');
GoogleMapsLoader.load((google) => {
let myLatlng = new google.maps.LatLng(44.5403,-78.5463);
new google.maps.Map(el, {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
new google.maps.Marker(el,{
draggable: true,
animation: google.maps.Animation.DROP,
position: myLatlng,
title:"Hello World!"
});
});
}

Answer 1

Try this code this work my project
Google Official Doc here
import GoogleMapsLoader from 'google-maps';
import { google } from 'google-maps';
ngAfterViewInit() {
let el = this._elementRef.nativeElement.querySelector('.contact-us');
GoogleMapsLoader.KEY = 'g4554645645645645645646';
GoogleMapsLoader.load((google) => {
let myLatlng = new google.maps.LatLng(23.5454, 90.8785);
let map = new google.maps.Map(el, {
center: new google.maps.LatLng(23.8787878, 90.87878),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
let marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: myLatlng,
map: map,
title:"Hello World!"
});
});
Template.html
<div class="contact-us" style="position: relative; height: 470px;"></div>

Answer 2

The marker function doesnt seem to match the official docs here.
let map = new google.maps.Map(el, {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
let marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: myLatlng,
map: map,//set map created here
title:"Hello World!"
});