角2 Google Maps with Multiple Markers

Question

私は現在、Google Mapsを使ったAngular2プロジェクトを開発中です。

私は、マーカーとその周辺に複数のマーカーを表示しようとしています。 私はマップが機能していますが、マーカーに見えません。

<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

マーカー機能が公式ドキュメント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

何らかのエラーが記録され、これが私のプロジェクトの作業

Googleの公式ドキュメント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>