如何在角4中使用/集成谷歌地图apis

Question

how to use google maps apis in angular 4.

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

Answer 1

你可以试试这个：

第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);
  }
}

恭喜!!!

以下是您所做的快照。