OverviewOfficial Website

@angular/google-maps contains solutions for the Google Maps Typescript Core API.

Add Package

npm install @angular/google-maps --save

Remove Package

npm uninstall @angular/google-maps Or you can remove package by removing specific package from package.json

Or you can remove package by removing specific package from package.json

longitude = 20.728218;
latitude = 52.128973;

<agm-map [latitude]="latitude" [longitude]="longitude" style="height: 300px"></agm-map>

longitude = 20.728218;
latitude = 52.128973;
markers: any;

this.markers = [
{ latitude: 52.228973, longitude: 20.728218 }
];

placeMarker(position: any) {
const lat = position.coords.lat;
const lng = position.coords.lng;
this.markers.push({ latitude: lat, longitude: lng });
}

<agm-map [latitude]="latitude" [longitude]="longitude" style="height: 300px" (mapClick)="placeMarker($event)">
<agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude"></agm-marker>
</agm-map>

@ViewChild('streetviewMap', { static: true }) streetviewMap: any;
@ViewChild('streetviewPano', { static: true }) streetviewPano: any;

_initPanorama() {
if (isPlatformBrowser(this.platformId)) {
this.mapsAPILoader.load().then(() => {
const center = { lat: 42.345573, lng: -71.098326 };
// tslint:disable-next-line: no-string-literal
const map = new window['google'].maps.Map(this.streetviewMap.nativeElement, { center, zoom: 12, scrollwheel: false });
// tslint:disable-next-line: no-string-literal
const panorama = new window['google'].maps.StreetViewPanorama(
this.streetviewPano.nativeElement, {
position: center,
pov: { heading: 34, pitch: 10 },
scrollwheel: false
});
map.setStreetView(panorama);
});
}
}

<div id="streetview-map" #streetviewMap></div>
<div id="streetview-pano" #streetviewPano style="height: 300px"></div>

longitude = 20.728218;
latitude = 52.128973;

<agm-map [latitude]="latitude" [longitude]="longitude" style="height: 300px">
<agm-circle [latitude]="latitude" [longitude]="longitude" [radius]="9000" [fillColor]="'red'" [circleDraggable]="true" [editable]="true">
</agm-circle>
</agm-map>