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