Consuming your library

$ npm i angular-googlemaps --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

// Import this library
import { MapsModule,GoogleMapsConfig } from 'angular-googlemaps';
import { LAZY_MAPS_API_CONFIG } from '@agm/core';
//End import

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MapsModule
  ],
  //configure your provider like this to send your key
  providers: [{ provide: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig }],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components:

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

// Import your Service and Model
import { GoogleMapsConfig } from 'angular-googlemaps';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {

//set your lat and lng 
lat: number = -23.586479;
lng: number = -46.682078;
 
 //Set your google Key here
 constructor(private googleMapsConfig: GoogleMapsConfig) {
    this.googleMapsConfig.getApiKey('Your Key');
  }

}

Now We need to call the directives in our html:

<app-maps></app-maps>

License

MIT © Thiago da Silva Adriano