Google Map in Angular

 

Implement Google Map in Angular:

For Google map implementation

Step 1:-

Go to Angular application and install PrimeNg using below commond.

 npm install primeng  

 npm install primeicons 

Step 2:-

Onpen angular.json file and add below styles

    "node_modules/primeng/resources/themes/saga-blue/theme.css",

    "node_modules/primeng/resources/primeng.min.css",

    "node_modules/primeicons/primeicons.css",

Step 3:-

Open module.ts and import below modules from PrimeNg

import { GMapModule } from 'primeng/gmap';

import { ToastModule } from 'primeng/toast';

import { DialogModule } from 'primeng/dialog';

import { ButtonModule } from 'primeng/button';

import { MessageService } from 'primeng/api';

import { FormsModule } from '@angular/forms';

@NgModule({

  declarations: [

    UserListComponent

  ],

  imports: [

    CommonModule,

    UserRoutingModule,

    GMapModule,

    ToastModule,

    DialogModule,

    FormsModule,

    ButtonModule

  ],

  providers: [MessageService]

})

Step 4:-

Open index.html file and add below script

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=<GoogleMapKey>"></script>

Note : <GoogleMapKey> Replaced with your Google map key.


if you don't have key then use
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

Step 5:-

Open <component>.component.html and add below HTML


<p-toast [style]="{marginTop: '80px'}"></p-toast>

<p-gmap #gmap [style]="{'width':'100%','height':'320px', 'margin-bottom': '1em'}" [options]="options"
[overlays]="overlays" (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)"
(onOverlayDragEnd)="handleDragEnd($event)"></p-gmap>

<button type="button" pButton label="Clear" icon="pi pi-times" (click)="clear()" style="margin-right:.25em"></button>
<button type="button" pButton label="Zoom In" icon="pi pi-plus" (click)="zoomIn(gmap.getMap())"
style="margin-right:.25em"></button>
<button type="button" pButton label="Zoom Out" icon="pi pi-minus" (click)="zoomOut(gmap.getMap())"></button>

<p-dialog showEffect="fade" [(visible)]="dialogVisible" header="New Location" [style]="{width: '300px'}">
<div class="p-grid p-fluid" *ngIf="selectedPosition">
<div class="p-col-2"><label for="title">Label</label></div>
<div class="p-col-10"><input type="text" autocomplete="off" pInputText id="title" [(ngModel)]="markerTitle">
</div>

<div class="p-col-2"><label for="lat">Lat</label></div>
<div class="p-col-10"><input id="lat" type="text" readonly pInputText [ngModel]="selectedPosition.lat()"></div>

<div class="p-col-2"><label for="lng">Lng</label></div>
<div class="p-col-10"><input id="lng" type="text" readonly pInputText [ngModel]="selectedPosition.lng()"></div>

<div class="p-col-2"><label for="drg">Drag</label></div>
<div class="p-col-10">
<p-checkbox [(ngModel)]="draggable" binary="true" [style]="{'margin-top':'.25em'}"></p-checkbox>
</div>
</div>
<ng-template pTemplate="footer">
<div>
<button type="button" pButton label="Add Marker" icon="pi-plus" (click)="addMarker()"></button>
</div>
</ng-template>
</p-dialog>

Step 6:-

Open <component>.component.ts and add below code


import { Component, OnInit } from '@angular/core';
import { MessageService } from 'primeng/api';
declare var google: any
@Component({
selector: 'app-google-map',
templateUrl: './google-map.component.html',
styleUrls: ['./google-map.component.scss']
})
export class GoogleMapComponent implements OnInit {
options: any;

overlays: any[] = [];

dialogVisible: boolean = false;

markerTitle?: string | null;

selectedPosition: any;

infoWindow: any;

draggable: boolean = false;

constructor(private messageService: MessageService) { }

ngOnInit(): void {
this.options = {
center: { lat: 36.890257, lng: 30.707417 },
zoom: 12
};

this.initOverlays();

this.infoWindow = new google.maps.InfoWindow();
}

handleMapClick(event: any) {
this.dialogVisible = true;
this.selectedPosition = event.latLng;
}

handleOverlayClick(event: any) {
let isMarker = event.overlay.getTitle != undefined;

if (isMarker) {
let title = event.overlay.getTitle();
this.infoWindow.setContent('' + title + '');
this.infoWindow.open(event.map, event.overlay);
event.map.setCenter(event.overlay.getPosition());

this.messageService.add({ severity: 'info', summary: 'Marker Selected', detail: title });
}
else {
this.messageService.add({ severity: 'info', summary: 'Shape Selected', detail: '' });
}
}

addMarker() {
this.overlays.push(new google.maps.Marker({ position: { lat: this.selectedPosition.lat(), lng: this.selectedPosition.lng() }, title: this.markerTitle, draggable: this.draggable }));
this.markerTitle = null;
this.dialogVisible = false;
}

handleDragEnd(event: any) {
this.messageService.add({ severity: 'info', summary: 'Marker Dragged', detail: event.overlay.getTitle() });
}

initOverlays() {
if (!this.overlays || !this.overlays.length) {
this.overlays = [
new google.maps.Marker({ position: { lat: 36.879466, lng: 30.667648 }, title: "Konyaalti" }),
new google.maps.Marker({ position: { lat: 36.883707, lng: 30.689216 }, title: "Ataturk Park" }),
new google.maps.Marker({ position: { lat: 36.885233, lng: 30.702323 }, title: "Oldtown" }),
new google.maps.Polygon({
paths: [
{ lat: 36.9177, lng: 30.7854 }, { lat: 36.8851, lng: 30.7802 }, { lat: 36.8829, lng: 30.8111 }, { lat: 36.9177, lng: 30.8159 }
], strokeOpacity: 0.5, strokeWeight: 1, fillColor: '#1976D2', fillOpacity: 0.35
}),
new google.maps.Circle({ center: { lat: 36.90707, lng: 30.56533 }, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500 }),
new google.maps.Polyline({ path: [{ lat: 36.86149, lng: 30.63743 }, { lat: 36.86341, lng: 30.72463 }], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2 })
];
}
}

zoomIn(map: any) {
map.setZoom(map.getZoom() + 1);
}

zoomOut(map: any) {
map.setZoom(map.getZoom() - 1);
}

clear() {
this.overlays = [];
}
}

Follow me:

YouTube

Facebook

Google Blog

CSharpCorner

#Angular #GMap #GoogleMap