DEV Community

Cover image for Setup Google Maps with AGM in Angular App
Pato
Pato

Posted on • Updated on

Setup Google Maps with AGM in Angular App

Always wondered how to setup Google Maps the easy way in an Angular project?

Here's I'm going to show you how.

If you are looking to add a lot of functionality I will suggest you to add the map the way I teach you in my other tutorial: https://dev.to/pato_codes/setup-google-map-in-angular-app-the-pro-way-3m9p

Setup Google Maps with AGM (Angular Google Maps)

If it was me working on a project that I needed to do some basic Google maps functionality I will approach it this way by using the AGM library. if the app needs more custom functionality I will do it using the Google Maps API only.

To learn more about AGM (Angular Google Maps) visit:
https://angular-maps.com/
https://stackblitz.com/edit/angular-google-maps-demo

Let's get Started!!

1) Create a new Angular project:

   ng new angular-agm
Enter fullscreen mode Exit fullscreen mode

2) Install the AGM library inside of you Angular app you just created

   npm install @agm/core
Enter fullscreen mode Exit fullscreen mode

3) Now open your app.module.ts file. Let's add the AGM library to our app. At the top of your file add the following line

   import { AgmCoreModule } from '@agm/core';
Enter fullscreen mode Exit fullscreen mode

4) Generate a Google Maps API key here

5) Add the AgmCoreModule to your imports array inside of the app.module.ts file.

   imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: 'YOUR GOOGLE API KEY HERE'
    })
  ],
Enter fullscreen mode Exit fullscreen mode

6) Paste your generated API Key as the value for your apiKey property.

7) Time to add the map to your HTML file. Go to your app.component.html and add the following:

<agm-map [latitude]="lat" [longitude]="lng"></agm-map>
Enter fullscreen mode Exit fullscreen mode

Note: The latitude and longitude values are used to show the centered initial view of the map.

8) Adding a marker to the map. Inside of your app.component.html add the following line:

   <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
Enter fullscreen mode Exit fullscreen mode

Your html file will look like this:

   <agm-map [latitude]="lat" [longitude]="lng">
     <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
   </agm-map>
Enter fullscreen mode Exit fullscreen mode

9) Go to your CSS file. app.component.css and add the following:

   agm-map {
     height: 500px;
   }
Enter fullscreen mode Exit fullscreen mode

Note: If you don't add the height, the map won't show on your app.

10) Go to your app.component.ts file add the following variables:

  lat = 40.730610;
  lng = -73.935242;
Enter fullscreen mode Exit fullscreen mode

The variables are the ones defining where is the center of the map and also place the marker in the same place.

11) Start your server in the terminal:

   ng serve --o
Enter fullscreen mode Exit fullscreen mode

13) You should see something like this:

14) The complete repo:
https://github.com/devpato/angular-agm-tutorial

Discussion (9)

Collapse
abuakkar profile image
Abubakkar-Tahir-Khan • Edited

every thing is ok there is no error in console but not showing map on browser

Collapse
devpato profile image
Pato Author

Did you add this part ? agm-map {
height: 500px;
}

Collapse
abuakkar profile image
Abubakkar-Tahir-Khan

hy thanks working fine but can you tell me i have add input for search and filter record in markers but when there is not record exist in the map so then do not show map show

there is no record find

Thread Thread
awesomeaiden profile image
Aiden Gonzalez

Hi, how did you get your app to start working? I have the same issue you had with no map showing up on the browser at all. What did you do after that point to get the map to show up?

Thread Thread
devpato profile image
Pato Author

Abuba, so the tutorial part works now? but now you want to add a search input functionality?

Thread Thread
devpato profile image
Pato Author

Aiden, what part you are stocked on? The tutorial part or an extra functionality? I'm down to help if I can see some code

Collapse
abhishekronan profile image
Abhishekronan

Hi Pato,
can we have a selection menu list with countries and when we select a country, the marker should point to that country on world map.? How to pass lat and lng values to the markers of different countries? I stuck here. Please help me. thank you.

Collapse
layzee profile image
Lars Gyrup Brink Nielsen

How does AGM compare to the offical @angular/google-maps library?

Collapse
arpitarora profile image
arpitarora • Edited

Hello sir can you please tell me how to reverse geocoding will be done like if we have two input box lat and lang after inputting the value then map will move according to lat and lat please