Integrate Google Maps in Angular Application

Summary

Integrating Google Maps into any web application is a very common feature. Google already provides Map API for integrating it into the web application. For integrating into Angular, We already have npm package with nicely maintained documentation which makes our task quite easy, We just need to import the module and follow the steps.

Step 1: Install and configure Angular Google Maps Module

At first, we need to install the package @agm/core into the project folder, Run below command over terminal.

npm i @agm/core --save

Now update the app.module.ts file.

  import { AgmCoreModule } from '@agm/core';
 
  @NgModule({
    imports: [
      ....
      AgmCoreModule.forRoot({
        apiKey: '/*Enter API key here */'
      })
    ],
    ...
  })
  export class AppModule { }

Now update the Component file.

@Component({
  selector: 'your-comp',
  styles: ['agm-map { height: 400px;}'],
  template: `
  <agm-map [latitude]='latitude' [longitude]='longitude'
  [mapTypeId]='mapType'>
  </agm-map>
  `
})
export class YourComponent {
  latitude = 28.4733988;
  longitude = 77.1690139;
  mapType = 'roadmap';
}

Note: Height is mandatory in the above to put the proper height of the map.

After following the above steps, the basic level of google maps integration can be achieved. In the agm-map 3 properties are set first two is latitude & longitue of the place and third one is the type of map you want now the value set is raodmap. The other options of map type can be satellite, hybrid, terrain. Now there are options to customize more as per the requirement. So further we will see the advanced configuration of google maps.

Advanced Integration: Plot Multiple locations on maps

In the above example, we saw a single place plotted on google maps where the coordinate was at the center of the map, Here we will see how to plot multiple places on google maps.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `<agm-map
    [latitude]="latitude"
    [longitude]="longitude"
    [zoom]="2"
    (mapClick)="addMarker($event.coords.lat, $event.coords.lng)"
    >
    <agm-marker
    *ngFor="let marker of markers"
    [latitude]="marker.lat"
    [longitude]="marker.lng"
    [opacity]="marker.alpha"
    [markerDraggable]="true"
    (markerClick)="selectMarker($event)"
    >
    </agm-marker>
 
    </agm-map>
    <p *ngIf="selectedMarker">
      Lat: {{ selectedMarker.lat }} Lng: {{ selectedMarker.lng }}
    </p>`,
  styles: ['agm-map { height: 500px; }'],
})
export class AppComponent {
 
  lat = 43.879078;
  lng = -103.4615581;
  selectedMarker;
  markers = [
    { lat: 54.2166845, lng:-13.4547512 , alpha: 1 },
    { lat: 51.8679575, lng: 14.6368418, alpha: 1 },
    { lat: 59.881411, lng: 20.867694, alpha: 1 },
    { lat: 8.720884, lng: 77.479315, alpha: 1 }
  ];
 
}

In the above code, We can see different coordinates are stored in the markers array which is responsible for creating the different pointer on the map. Here we have set 2 more properties in agm-map component, zoom which is used to set the how far in or out map needs to show 0 is for the farthest which can go upto 22. mapClick is for emitting event when user clicks on map.

Beow agm-map, AgmMarker is used to render a map marker inside a AgmMap. Official Doc: If you want to get more depth knowledge then read the full documentation here.

Refs