Angular 2 Google Map with multiple markers

Question

I am currently developing an Angular2 project that uses Google Maps.

I am trying to display markers and several markers around an area. My card is working, but it can’t seem like a 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

The marker function does not 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!"
          });

Answer 2

Try this code, this work is my project

Google white paper 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>