loading...
Cover image for Setup Google Maps with AGM in Angular App

Setup Google Maps with AGM in Angular App

devpato profile image Pato Updated on ・2 min read

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

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

   npm install @agm/core

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';

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'
    })
  ],

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>

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>

Your html file will look like this:

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

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

   agm-map {
     height: 500px;
   }

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;

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

13) You should see something like this:

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

Posted on by:

devpato profile

Pato

@devpato

Google Developer Expert on Angular and Web Technologies | Auth0 Ambassador | Media Developer Expert for Cloudinary | Technical Coach at SpringBoard

Discussion

pic
Editor guide
 

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.

 

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

 

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

 

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

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?

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

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

 

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