Manually Loading

Manually loading Google Maps API

Live demo

In case you prefer placing the <script> tag manually, or you have your own loading mechanism for fetching Google's Maps API, you can simply import the main module with no configuration.

🌳 This will tree-shake the entire async module and its dependencies.

Note you will have to ensure:

1. Loading Maps API completely before your map component gets loaded.
2. Loading of all native libraries you're gonna use (see docs).

Example

1. Import GoogleMapsModule from the core package:

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   
   import { GoogleMapsModule } from '@bespunky/angular-google-maps/core'; // 1. Import module
   
   import { AppComponent } from './app.component';
   
   @NgModule({
       declarations: [
           AppComponent
       ],
       imports: [
           BrowserModule,
           // 2. Include module in your app
           GoogleMapsModule.forRoot()
       ],
       providers: [], 
       bootstrap: [AppComponent]
   })
   export class AppModule { }

2. Add a map to your application:

   <!-- Your component's .html file -->
   <bs-google-map></bs-google-map>

Bam! You have a map on your screen! 🤟😎

Next steps