具有多个标记的 Angular 2 Google 地图

Question

我目前正在开发一个使用 Google 地图的 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

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!"
    });

});

模板.html

 <div class="contact-us" style="position: relative; height: 470px;"></div>

Answer 2

标记功能似乎与官方文档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!"
          });