[英]how to use/integrate google maps apis in angular 4
how to use google maps apis in angular 4.
I am trying to use google maps. 我正在尝试使用谷歌地图。 gave reference to google maps api with the key. 用密钥参考谷歌地图api 。 but not able to use it. 但不能使用它。 while integrating it . 在整合它的同时。 got the error google is not defined and to resolve i declared var google:any error got resolved but it is not building the map and now i am getting "Cannot read property 'firstChild' of null" 得到错误谷歌没有定义,并解决我声明var谷歌:任何错误得到解决,但它没有建立地图,现在我得到“无法读取属性'firstChild'的null”
You can try this: 你可以试试这个:
Step 1: npm install @types/googlemaps --save
第1步: npm install @types/googlemaps --save
Step 2 : Add below line into your index.html
with correct google API key ( Don't forget it ) 第2步 :使用正确的Google API密钥将以下行添加到index.html
(不要忘记)
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap"
async defer></script>
Step 3 : Add below line to your html where you want to add google map 第3步 :在您要添加谷歌地图的html中添加以下行
<div #googleMap style=”width:300%;height:300px”></div>
Step 4: Now you add below code into your angular component 第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);
}
}
Congratulations !!! 恭喜!!!
Here is the snapshot what you did. 以下是您所做的快照。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.