Setup Google Map In Angular App (The Pro Way) Part 1
Tags: angular, googlemaps, tutorial, webdev
Published: 2019-10-14 01:13:58

If you ever wondered how to add a Google map to you Angular app, I'm going to show you how. I know there are libraries to do so like AGM which works great but for more advanced use cases, I will suggest for you do it the way I will show you here. If you are looking for basic map functionality follow my other tutorial:

https://dev.to/devpato/setup-google-maps-with-agm-in-angular-app-33em

**Note**: this is the repo. branch part 1 has the final code for this tutorial

https://github.com/devpato/angular-google-maps-tutorial


1) Create a new Angular project:
   ```javascript
   ng new angular-gmap
   ```
2) Generate a Google Maps API key <a href="https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key">here</a>

3) Inside of your project go to the index.html file and add the following line inside of your head tags:
   ```html
   <head>
    .
    .
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY" 
    type="text/javascript"></script>
   </head>
   ```
4) Now add your API Key inside of the script tag.

5) Type to add allow Angular to use the Google Maps types. In your terminal run:
   ```javascript
   npm i @types/googlemaps
   ```
6) Time to tell Angular we are ready to use the Google Maps Types. Open your <strong>tsconfig.app.json</strong> and <strong>tsconfig.spec.json</strong> and add googlemaps to the types array inside of the compilerOptions object.

<i>Note: I only put it on the tsconfig.app.json file; some people have encountered issues and have to add it to both files mentioned above.
</i>

   ```javascript
   "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["googlemaps"]
   },
   ```
7) Inside of your app.component.html add the following code:
   ```html
    <div #mapContainer id="map"></div>
   ```
8) Time to add some CSS to your map. Go to you app.component.css file and add the following:

   ```css
   #map {
    height: 500px;
    width: 100%;
   }
   ```

<i>Note: If you don't add the height, your map won't show in your app.</i>

9) In your app.component.ts file your import line at the top of you file should look like this:
  ```javascript
  import { Component, AfterViewInit, ViewChild, ElementRef } from 
  '@angular/core';
  ```
10) Inside of the same file,  we give the app access to the DOM element we have created with ViewChild
   ```javascript  
   @ViewChild('mapContainer', {static: false}) gmap: ElementRef;
   ```
Where <strong>mapContainer</strong> is the name of the HTML element we previously created.

11) Now create a map variable that contains the Google Maps API inside of your app.component.ts.
  ```javascript
   map: google.maps.Map;
  ```
We are able to do this because of the google map types we added to the project.

12) In the app.component.ts file add the following variables:
  ```javascript
  lat = 40.730610;
  lng = -73.935242;
  ```
13)Let's create a coordinates variable to use our latitude and longitude.
   ```javascript
   coordinates = new google.maps.LatLng(this.lat, this.lng);
   ```
14) In the same file, create a mapOptions variable as followed:
   ```javascript
   mapOptions: google.maps.MapOptions = {
      center: this.coordinates,
      zoom: 8,
    };
   ```
15) Inside of your app.component.ts create a mapInitializer() function.

   ```javascript
   mapInitializer() {
    this.map = new google.maps.Map(this.gmap.nativeElement, 
    this.mapOptions);
   }
   ```

16) Time to use the AfterViewInit. Your file should look like this:
   ```javascript
   ...
   export class AppComponent implements AfterViewInit {
    ...
    ngAfterViewInit() {

    }
   } 
   ```
17) Inside of your ngAfterViewInit add the following line:
   ```javascript
   ngAfterViewInit() {
    this.mapInitializer();
   }
   ```
<h3>Time to add a Marker</h3>

18) Create a new variable
   ```javascript
    marker = new google.maps.Marker({
     position: this.coordinates,
     map: this.map,
   });
   ```
19) Add the marker to the map by adding the following line to the mapInitializer() function:

   ```javascript
   this.marker.setMap(this.map);
   ```
20) Your app.component.ts should look like this:
   ```javascript
   export class AppComponent implements AfterViewInit {
    title = 'angular-gmap';
    @ViewChild('mapContainer', { static: false }) gmap: ElementRef;
    map: google.maps.Map;
    lat = 40.73061;
    lng = -73.935242;

    coordinates = new google.maps.LatLng(this.lat, this.lng);

    mapOptions: google.maps.MapOptions = {
     center: this.coordinates,
     zoom: 8
    };

    marker = new google.maps.Marker({
      position: this.coordinates,
      map: this.map,
    });

    ngAfterViewInit() {
      this.mapInitializer();
    }

    mapInitializer() {
      this.map = new google.maps.Map(this.gmap.nativeElement, 
      this.mapOptions);
      this.marker.setMap(this.map);
    }
   }
   ```

You should see something like this:
<img src="https://thepracticaldev.s3.amazonaws.com/i/h21dbktvb0yr91j0pzmv.png" />

**Don't forget to check the section part, to add multiple markers and info windows to the markers**

https://dev.to/devpato/multiple-markers-on-google-map-in-angular-app-the-pro-way-pt2-50p0

The completed repo project:
https://github.com/devpato/angular-google-maps-tutorial


<img src="https://thepracticaldev.s3.amazonaws.com/i/5a87eog40zvcsimuaew4.png" />