如何在Angle 4中使用/集成Google Maps API

Question

how to use google maps apis in angular 4.

我正在尝试使用Google地图。用键给了Google Maps api参考。但无法使用。同时整合它。得到了错误的谷歌未定义，并解决我宣布了var google：解决了任何错误，但它没有建立地图，现在我得到“无法读取null的'firstChild'属性”

Answer 1

你可以试试这个：

\n\n

步骤1： npm install @types/googlemaps --save

\n\n

第 2 步：将以下行添加到您的正确的 google API 密钥index.html中（不要忘记）

\n\n

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

\n\n

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

\n\n

<div #googleMap style=\xe2\x80\x9dwidth:300%;height:300px\xe2\x80\x9d></div>\n

\n\n

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

\n\n

import { Component, ViewChild } from \'@angular/core\';\nimport { } from \'@types/googlemaps\';\n\n@Component({\n  selector: \'map-component\',\n  templateUrl: \'./map.component.html\',\n  styleUrls: [\'./map.component.css\']\n})\n\nexport class MapComponent {\n  @ViewChild(\'googleMap\') gmapElement: any;\n  map: google.maps.Map;\n\n  ngOnInit() {\n    var mapProp = {\n      center: new google.maps.LatLng(28.4595, 77.0266),\n      zoom: 14,\n      // mapTypeId: google.maps.MapTypeId.ROADMAP\n      mapTypeId: google.maps.MapTypeId.HYBRID\n      // mapTypeId: google.maps.MapTypeId.SATELLITE\n      // mapTypeId: google.maps.MapTypeId.TERRAIN\n    };\n\n    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);\n    var marker = new google.maps.Marker({ position: mapProp.center });\n    marker.setMap(this.map);\n\n    var infowindow = new google.maps.InfoWindow({\n      content: "Hey, We are here"\n    });\n\n    infowindow.open(this.map, marker);\n  }\n}\n

\n\n

恭喜！

\n\n

这是您所做的快照。

\n\n

\n