Angular 4 Google Maps

I know you want to integrate Google maps in your Angular project that’s why you are reading this Angular 4 Google Maps (AGM) Tutorial. So, without wasting a bit, let’s learn how to integrate Angular 4 Map in your website/Project.

 

Here I’m assuming that you have already run an Angular 4 project.

 

How to integrate Angular 4 Google Maps.

To use Angular 4 Google Maps, first, you need to install it. To do so, run the following command in your project folder.


npm install @agm/core --save

 

After installation Angular 4 AGM, we will import it. To do so, head over to src/app/app.module.ts and import AgmCoreModule.


import { AgmCoreModule } from '@agm/core';

 

We also need to importAgmCoreModule with API KEY in decorator@NgModule function.


@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

    AgmCoreModule.forRoot({

      apiKey: 'API_KEY'

    })

  ],

  providers: [],

  bootstrap: [AppComponent]

})

 

You may have noticed, we need to provide API KEY to display Angular 4 Google Maps. Don’t worry, it’s very easy to get that.

 

Let’s learn…

 

How to get API KEY to use Angular 4 Map

It is very simple to get API KEY. To get that go to this website. Where you will see a button called Get A KEY. Just click on that.

Angular 4 Map API Key

 

A pop-up will appear where you will be asked to “select or create a project”. Create a new project or you may select if you have made earlier and then click on ENABLE API. After a while, you will see an API key on your screen, You just need to copy that.

Angular 4 Map API Key

 

Angular 4 Map API Key

 

Now you need to paste the API KEY in @NgModuel decorator. After adding API KEY,  @NgModuel decorator should be like below.


@NgModule({

  declarations: [

    AppComponent

   ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

    AgmCoreModule.forRoot({

      apiKey: 'AIzaDyBbDs04jxFIecqtSs_1TOT7X8oY6d3MKe0'

    })

   ],

   providers: [],

   bootstrap: [AppComponent]

})

 

Note: If you select a pre-built project, you may face an error called “ExpiredKeyMapError“. So, I recommend you to create a fresh project where you will get a brand new API KEY.

 

After adding Google Map, we will extend the app component one by one.

 

First, we will add longitude and latitude. To do so, open /src/app/app.component.ts and use following codes.


    export class AppComponent {

      title: string = 'Google Maps Addeed Successfully';

      lat: number = 28.38 ;

      lng: number = 77.12;

    }

 

Note: Here I’m using longitude and latitude of my City. You have a free hand to change according to your project requirement.

 

How to set up template for Angular 4 Map

After adding Angular 4 Google Maps, We will make a template to display it. To do so head over to /src/app/app.component.html and add following code there.


<agm-map [latitude]="lat" [longitude]="lng">

  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>

</agm-map>

 

Now we will add some styling…

 

To add some styling, go to /src/app/app.component.css and use following CSS property.


agm-map {

   height: 500px;

}

 

Note: You can add more CSS as per your project requirement.

 

Isn’t Angular 4 AGM very easy to implement?

What you say? Isn’t Angular 4 AGM so simple to set up in your project.  After reading this post, I hope you would be able to integrate Angular 4 Gooogle Maps (AGM) in your website. If you face any problem, Feel free to ask via comment box. And join us on Facebook, LinkedIn, and Twitter for more updates.

 

Thanks!

 

Must Read: Angular 4 Firebase Tutorial: Build a Small Angular 4 Application With Firebase