Integrating Google Maps in Angular Applications

500
SHARES
2.3k
VIEWS

Today we’ll see how we can integrate Google maps in Angular Applications. we are going to use a npm package called “agm/core”. This package has all the functionality built-in that we need. So let’s start adding google maps into our app.

Getting Started

First and foremost, in order to do any kind of interaction with the Maps API, you need an API key from Google. Follow the instructions here to get that set up.

Install and configure Angular Google Maps

Now open your project folder and run this command in the terminal:

$ npm i @agm/core --save

The command above will install the Angular Google Maps package and now open app.module.ts:

// import angular google maps package
import { AgmCoreModule } from '@agm/core';

@NgModule({
  imports: [
    ...,
    AgmCoreModule.forRoot({
      apiKey: 'YOUR GOOGLE MAPS API KEY' // apiKey is required 
    })
  ],
  ...
})
export class AppModule { }

Now in your templates you can include the map component. remember you must explicitly set the height of the agm-map element in CSS.

@Component({
  selector: 'your-comp',
  styles: ['agm-map { height: 300px; /* height is required */ }'],
  template: `
    <agm-map [latitude]='latitude' [longitude]='longitude' 
      [mapTypeId]='mapType'>
    </agm-map>
  `
})
export class YourComponent {
  latitude = -28.68352;
  longitude = -147.20785;
  mapType = 'satellite';
}

Nice.! that’s it, these were the only steps we need to add google maps in angular applications. but there are more configuration options that we can use. if you want to see all the options then check out the full documentation.

Best resources to learn Angular, Firebase and ionic 4

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending