How to use / integrate google apis maps in angular 4
how to use google maps apis in angular 4.
I am trying to use google maps. gave a link to google maps api with a key. but unable to use it. integrating it. got an error google is not defined and resolve i declared var google: any the error is resolved but it does not build the map and now i get "Unable to read property" firstChild "from null"
+3
source to share
1 answer
You can try this:
Step 1: npm install @types/googlemaps --save
Step 2 : add below line in with correct google API key (don't forget) 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
<div #googleMap style="width:300%;height:300px"></div>
Step 4: Now you add below code to your angular component
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's a snapshot of what you took.
0
source to share