TheLazy.Dev
Portfolio GitHub

Blog

angular |googlemaps |tutorial |webdev

Setup Google Map In Angular App (The Pro Way) Part 1

devpato

Pato

Posted on October 14, 2019

Setup Google Map In Angular App (The Pro Way) Part 1

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:



   ng new angular-gmap
Enter fullscreen mode Exit fullscreen mode

2) Generate a Google Maps API key here

3) Inside of your project go to the index.html file and add the following line inside of your head tags:



   <head>
    .
    .
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY" 
    type="text/javascript"></script>
   </head>
Enter fullscreen mode Exit fullscreen mode

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:



   npm i @types/googlemaps
Enter fullscreen mode Exit fullscreen mode

6) Time to tell Angular we are ready to use the Google Maps Types. Open your tsconfig.app.json and tsconfig.spec.json and add googlemaps to the types array inside of the compilerOptions object.

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.



   "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["googlemaps"]
   },
Enter fullscreen mode Exit fullscreen mode

7) Inside of your app.component.html add the following code:



    <div #mapContainer id="map"></div>
Enter fullscreen mode Exit fullscreen mode

8) Time to add some CSS to your map. Go to you app.component.css file and add the following:



   #map {
    height: 500px;
    width: 100%;
   }
Enter fullscreen mode Exit fullscreen mode

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

9) In your app.component.ts file your import line at the top of you file should look like this:



  import { Component, AfterViewInit, ViewChild, ElementRef } from 
  '@angular/core';
Enter fullscreen mode Exit fullscreen mode

10) Inside of the same file, we give the app access to the DOM element we have created with ViewChild



   @ViewChild('mapContainer', {static: false}) gmap: ElementRef;
Enter fullscreen mode Exit fullscreen mode

Where mapContainer 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.



   map: google.maps.Map;
Enter fullscreen mode Exit fullscreen mode

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:



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

13)Let's create a coordinates variable to use our latitude and longitude.



   coordinates = new google.maps.LatLng(this.lat, this.lng);
Enter fullscreen mode Exit fullscreen mode

14) In the same file, create a mapOptions variable as followed:



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

15) Inside of your app.component.ts create a mapInitializer() function.



   mapInitializer() {
    this.map = new google.maps.Map(this.gmap.nativeElement, 
    this.mapOptions);
   }
Enter fullscreen mode Exit fullscreen mode

16) Time to use the AfterViewInit. Your file should look like this:



   ...
   export class AppComponent implements AfterViewInit {
    ...
    ngAfterViewInit() {

    }
   }
Enter fullscreen mode Exit fullscreen mode

17) Inside of your ngAfterViewInit add the following line:



   ngAfterViewInit() {
    this.mapInitializer();
   }
Enter fullscreen mode Exit fullscreen mode

Time to add a Marker

18) Create a new variable



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

19) Add the marker to the map by adding the following line to the mapInitializer() function:



   this.marker.setMap(this.map);
Enter fullscreen mode Exit fullscreen mode

20) Your app.component.ts should look like this:



   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);
    }
   }
Enter fullscreen mode Exit fullscreen mode

You should see something like this:

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

💖 💪 🙅 🚩
devpato
Pato

Posted on October 14, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Setup Google Map In Angular App (The Pro Way) Part 1
angular Setup Google Map In Angular App (The Pro Way) Part 1

October 14, 2019