angular-googlemaps

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