How to use @agm/core - 10 common examples

const googleMapsParams = {
  apiKey: environment.GOOGLE_MAPS_API_KEY,
  libraries: ['places'],
  language: 'en',
  // region: 'DE'
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AgmCoreModule.forRoot(googleMapsParams),
    MatGoogleMapsAutocompleteModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

const routes: Routes = [
    { path: 'widgets', component: WidgetsComponent },
    { path: 'cards', component: CardsComponent },
    { path: 'forms', component: FormsComponent },
    { path: 'inputs', component: InputsComponent },
    { path: 'lists', component: ListsComponent },
    { path: 'whiteframe', component: WhiteframeComponent },
    { path: 'colors', component: ColorsComponent },
    { path: 'ngmaterial', component: NgmaterialComponent }
];

@NgModule({
    imports: [
        AngleModule,
        RouterModule.forChild(routes),
        AgmCoreModule.forRoot({
            apiKey: 'AIzaSyBNs42Rt_CyxAqdbIBK0a5Ut83QiauESPA'
        })
    ],
    declarations: [
        WidgetsComponent,
        CardsComponent,
        FormsComponent,
        InputsComponent,
        ListsComponent,
        WhiteframeComponent,
        ColorsComponent,
        NgmaterialComponent,
        DialogResultExampleDialog,
        PizzaPartyComponent
    ],
    exports: [

import { AgmMarker } from '@agm/core';
/*
source code set hover to emit object { coord:{..}}
this code modify the prototype of AgmMarker._addEventListeners function
the modification is to emit the marker itself along with coord so we can
have access to props of 'marker' such as marker.infoWindow
*/

AgmMarker.prototype._addEventListeners = function () {
        var _this = this;
        var cs = this._markerManager.createEventObservable('click', this).subscribe(function () {
            if (_this.openInfoWindow) {
                _this.infoWindow.forEach(function (infoWindow) { return infoWindow.open(); });
            }
            _this.markerClick.emit(null);
        });
        this._observableSubscriptions.push(cs);
        var ds = this._markerManager.createEventObservable('dragend', this)
            .subscribe(function (e) {
            _this.dragEnd.emit({ coords: { lat: e.latLng.lat(), lng: e.latLng.lng() } });
        });
        this._observableSubscriptions.push(ds);
        var mover = this._markerManager.createEventObservable('mouseover', this)
            .subscribe(function (e) {
            //added target: _this to be emitted when hover

NavbarComponent,
    PassportComponent,
    AboutComponent,
    ProfileComponent,
    MessagesComponent,
    LoginComponent,
    ProfileLocationComponent,
    AdvertisementComponent,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes),
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyBuhH3Fi2ofA8t9jfd2iKowr9anDGyXvRA',
    }),
    AdsenseModule,
  ],
  providers: [TinderService, MessagesService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';

import { SharedModule } from '../../shared/shared.module';
import { routing } from './google-maps.routes';
import { GoogleMapsComponent } from './google-maps.component';

@NgModule({
    imports: [
        routing,
        SharedModule,
        AgmCoreModule.forRoot({
            apiKey: 'AIzaSyAQaGCkBos_D0w-cRhR2jD45yl99FjPFg8'
        })

    ],
    exports: [],
    declarations: [
        GoogleMapsComponent
    ],
    providers: [],
})
export class GoogleMapsModule { }

BrowserModule,
        ChatModule,
        FormsModule,
        HttpModule,
        NgbModule,
        ReactiveFormsModule,
        ChartsModule,
        JwtModule.forRoot({
            config: {
                whitelistedDomains: ['localhost:3001', 'localhost:8080', 'gce-neiist.org',
                                    'gce-neiist-development.herokuapp.com', 'gce-neiist-staging.herokuapp.com/',
                                    'fenix.tecnico.ulisboa.pt/oauth, maps.googleapis.com']
            }
        }),
        RouterModule.forRoot(appRoutes),
        AgmCoreModule.forRoot({
            apiKey: Vars.GOOGLE_MAPS,
        }),
        FlashMessagesModule,
    ],
    providers: [
        ValidateService,
        AuthService,
        StudentService,
        AuthGuardService,
        ThesisService,
        MockBackend,
        FeedbackService,
        BaseRequestOptions,
        AreasDump
    ],
    bootstrap: [AppComponent]

import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { NgxEchartsModule } from 'ngx-echarts';
import { NbCardModule } from '@nebular/theme';

import { ThemeModule } from '../../@theme/theme.module';
import { MapsRoutingModule, routedComponents } from './maps-routing.module';

@NgModule({
  imports: [
    ThemeModule,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k',
      libraries: ['places'],
    }),
    LeafletModule.forRoot(),
    MapsRoutingModule,
    NgxEchartsModule,
    NbCardModule,
  ],
  exports: [],
  declarations: [
    ...routedComponents,
  ],
})
export class MapsModule { }

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { AgmCoreModule } from '@agm/core';
import { AgmDirectionModule } from '../../../dist';

import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: environment.googleAPIKey,
    }),
    AgmDirectionModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from "@angular/core"
import { BrowserModule } from '@angular/platform-browser'
import { AgmCoreModule } from "@agm/core"
import { AppComponent } from "./app.component"
import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';

//DO NOT USE BELOW
//YOU NEED USE: import { AgmOverlays } from "agm-overlays"
import { AgmOverlays } from "../../src"

@NgModule({
  imports:[
    BrowserModule,
    AgmOverlays,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyD2Z0LzbjZXiqRAsVYTl4OP7cK7hdgR89U'
    }),
    AgmJsMarkerClustererModule
  ],
  bootstrap: [ AppComponent ],
  declarations: [ AppComponent ]
}) export class AppModule{}

import { InvitationPage } from './invitation.page';

const routes: Routes = [
  {
    path: '',
    component: InvitationPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyCYq0XB4TWCDdKS9gWGaeb2B4q0HeVTS5M'
    })
  ],
  declarations: [InvitationPage]
})
export class InvitationPageModule {}