Google Maps


Basic example




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

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

@Component({
  selector: 'map-example',
  templateUrl: 'map.html',
})

export class MapComponent {
    public map: any = { lat: 51.678418, lng: 7.809007 };
}
  

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

Add AgmCoreModule.forRoot({ apiKey: 'your key here' }) in the imports declarations, in the app.module.ts file to see the map (get an API key here).

API Reference for MDB Angular Maps:
      
        npm i --save @agm/core
      
    
// For MDB Angular Pro
import { AgmCoreModule } from '@agm/core'
  
    @NgModule({
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'your key here'
    })
  ],
})