Integrate Google Maps in Angular Application

    Sep 21, 2020       by Pankaj Kumar
angular-google-maps.jpg

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.

In this article, we will see how to integrate the Google Map,

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.

 

Conclusion

In this article, We learn about the Integration of Googe maps in Angular application.

I hope this article helped you to get in-depth knowledge about the topic. You can also find other demos/articles at Angular Sample Projects here to start working on enterprise-level applications.

Let me know your thoughts over email at pankaj.itdeveloper@gmail.com. I would love to hear them and If you like this article, share it with your friends.

Thank You!

google maps angular

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS