how to use google maps apis in angular 4.

我正在尝试使用谷歌地图.
    用密钥参考谷歌地图api.
    但不能使用它.
    在整合它的同时.得到错误谷歌没有定义,并解决我声明var谷歌：任何
    错误得到解决,但它没有构建地图,现在我得到了
    “无法读取属性’firstChild’的null”

最佳答案 你可以试试这个：

第1步：npm install @ types / googlemaps –save

第2步：使用正确的Google API密钥将以下行添加到index.html中(不要忘记)

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap"
async defer></script>

第3步：在您要添加谷歌地图的html中添加以下行

<div #googleMap style=”width:300%;height:300px”></div>

第4步：现在将以下代码添加到角度组件中

import { Component, ViewChild } from '@angular/core';
import { } from '@types/googlemaps';

@Component({
  selector: 'map-component',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})

export class MapComponent {
  @ViewChild('googleMap') gmapElement: any;
  map: google.maps.Map;

  ngOnInit() {
    var mapProp = {
      center: new google.maps.LatLng(28.4595, 77.0266),
      zoom: 14,
      // mapTypeId: google.maps.MapTypeId.ROADMAP
      mapTypeId: google.maps.MapTypeId.HYBRID
      // mapTypeId: google.maps.MapTypeId.SATELLITE
      // mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
    var marker = new google.maps.Marker({ position: mapProp.center });
    marker.setMap(this.map);

    var infowindow = new google.maps.InfoWindow({
      content: "Hey, We are here"
    });

    infowindow.open(this.map, marker);
  }
}

恭喜!!!

以下是您所做的快照.