Integrate Google Maps in Angular Application

In this article, we’ll learn how to display Google Maps in Angular application. For Google maps, we use Angular Google Maps (AGM) Core plugin to embed the map in our application.
The @agm/core offers simple solutions for the Google Maps JavaScript Core API with a lightweight library.
Let’s create a new project to demo for Google Maps. For that, you need to run the following command to create a project.


ng new google-maps-demo

“google-maps-demo” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd google-maps-demo”. To Run angular applications, it required to run “ng serve”.
After that, we need to install the “@agm/core” npm package in our application. run below command to install.


npm i @agm/core



After installing AGM Plugin we need to get the MAP API key from the Google developer account. For that, you need to follow their official documentation from their website Click here to get API key instruction.

After getting the Map API Key. We need to import “AgmCoreModule” in Our “app.module.ts” file.


import { AgmCoreModule } from '@agm/core';

@NgModule({
  declarations: [...],
  imports: [
.......,
    AgmCoreModule.forRoot({
      apiKey: 'Your Generated GOOGLE MAP API'
    })
  ],
  bootstrap: [...]
})

export class AppModule { }

After import in the module, we can use these in our component. Let’s add some markers on our Google map. Add below code in our “app.component.ts”.


import { Component } from '@angular/core';
import { MouseEvent } from '@agm/core';

//marker 
interface marker {
	lat: number;
	lng: number;
	label?: string;
	draggable: boolean;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  // google maps zoom level
  zoom: number = 9;
  
  // initial center position for the map
  lat: number = 35.7884241;
  lng: number = -83.5543329;
  googleMapType = 'satellite';


  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }
  
  mapClicked($event: MouseEvent) {
    this.markers.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng,
      draggable: true
    });
  }
  
  markerDragEnd(m: marker, $event: MouseEvent) {
    console.log('dragEnd', m, $event);
  }
  
  markers: marker[] = [
	  {
		  lat: 35.7884241,
		  lng: -83.5543329,
		  label: 'A',
		  draggable: true
	  },
	  {
		  lat: 35.8885241,
		  lng: -83.5543329,
		  label: 'B',
		  draggable: false
	  }
  ]
}

After adding these code we need to add the below code in “app.component.html”


<h1>Angular Google Maps (AGM) Demo</h1>
<agm-map 
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="zoom"
  [disableDefaultUI]="false"
  [zoomControl]="false"
  (mapClick)="mapClicked($event)"> 

  <agm-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="clickedMarker(m.label, i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label"
      [markerDraggable]="m.draggable"
      (dragEnd)="markerDragEnd(m, $event)">
      
    <agm-info-window>
      <strong>InfoWindow content</strong>
    </agm-info-window>
    
  </agm-marker>
  

</agm-map>



Output Display in below video

Spread the love
  •  
  •  
  •  
  •  
  • 12
  • 2
  •  
  •