How To Integrate Google Maps In Angular 14 App

Dec 17, 2022 0 858

Umang Ramani

This article will teach you how to incorporate Google Maps into Angular 14 projects and how to display markers on Google Maps.

Step 1

Create a new App using below command:

ng new Angular14GoogleMap

Step 2

Install the Google Map Module using below command:

npm install @angular/google-maps

Step 3

Import GoogleMapsModule into your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleMapsModule } from '@angular/google-maps'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleMapsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4

Add the reference Google Maps into your index.html and add your Google MAP API KEY as shown below:

Note
We are using the development key so the map will be displayed with the development-only watermark.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular14GoogleMap</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFaXNvUSNlqQoqlNBgCgppWcSeYxb5kDM"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Step 5: GOOGLE MAP USAGE

The GoogleMapsModule exports below mentioned some components that we can use:

5.1 GOOGLE MAP

<!-- google-maps-demo.component.html -->
<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom"
            (mapClick)="moveMap($event)"
            (mapMousemove)="move($event)">
</google-map>

<div>Latitude: {{display?.lat}}</div>
<div>Longitude: {{display?.lng}}</div>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-googlemap',
  templateUrl: './googlemap.component.html',
  styleUrls: ['./googlemap.component.css']
})
export class GooglemapComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    display: any;
    center: google.maps.LatLngLiteral = {
        lat: 24,
        lng: 12
    };
    zoom = 4;
    moveMap(event: google.maps.MapMouseEvent) {
        if (event.latLng != null) this.center = (event.latLng.toJSON());
    }
    move(event: google.maps.MapMouseEvent) {
        if (event.latLng != null) this.display = event.latLng.toJSON();
    }
}
npm start

You will see the below mentioned O/P on your browser at http://localhost:4200/

5.2 GOOGLE MAP MARKER

<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom"
            (mapClick)="addMarker($event)">
  <map-marker *ngFor="let markerPosition of markerPositions"
              [position]="markerPosition"
              [options]="markerOptions"></map-marker>
</google-map>
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-map-marker',
    templateUrl: './map-marker.component.html',
    styleUrls: ['./map-marker.component.css']
})
export class MapMarkerComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    center: google.maps.LatLngLiteral = {
        lat: 24,
        lng: 12
    };
    zoom = 4;
    markerOptions: google.maps.MarkerOptions = {
        draggable: false
    };
    markerPositions: google.maps.LatLngLiteral[] = [];
    addMarker(event: google.maps.MapMouseEvent) {
        if (event.latLng != null) this.markerPositions.push(event.latLng.toJSON());
    }
}
npm start

You will see the below mentioned O/P on your browser at http://localhost:4200/

5.3 GOOGLE MAP INFO WINDOW

<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom"
            (mapClick)="addMarker($event)">
  <map-marker #marker="mapMarker"
              *ngFor="let markerPosition of markerPositions"
              [position]="markerPosition"
              (mapClick)="openInfoWindow(marker)"></map-marker>
  <map-info-window>Info Window content</map-info-window>
</google-map>
import { Component, OnInit, ViewChild } from '@angular/core';
import { MapInfoWindow, MapMarker } from '@angular/google-maps';

@Component({
    selector: 'app-map-info-window',
    templateUrl: './map-info-window.component.html',
    styleUrls: ['./map-info-window.component.css']
})
export class MapInfoWindowComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow | undefined;
    center: google.maps.LatLngLiteral = {
        lat: 24,
        lng: 12
    };
    markerPositions: google.maps.LatLngLiteral[] = [];
    zoom = 4;
    addMarker(event: google.maps.MapMouseEvent) {
        if (event.latLng != null) this.markerPositions.push(event.latLng.toJSON());
    }
    openInfoWindow(marker: MapMarker) {
        if (this.infoWindow != undefined) this.infoWindow.open(marker);
    }
}
npm start

You will see the below-mentioned O/P on your browser at http://localhost:4200/

5.4 GOOGLE MAP POLYLINE

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-map-polyline',
    templateUrl: './map-polyline.component.html',
    styleUrls: ['./map-polyline.component.css']
})
export class MapPolylineComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    center: google.maps.LatLngLiteral = {
        lat: 24,
        lng: 12
    };
    zoom = 4;
    vertices: google.maps.LatLngLiteral[] = [{
        lat: 13,
        lng: 13
    }, {
        lat: -13,
        lng: 0
    }, {
        lat: 13,
        lng: -13
    }, ];
}
<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom">
  <map-polyline [path]="vertices"></map-polyline>
</google-map>
npm start

You will see the below mentioned O/P on your browser at http://localhost:4200/

5.5 GOOGLE MAP POLYGON

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-map-polygon',
    templateUrl: './map-polygon.component.html',
    styleUrls: ['./map-polygon.component.css']
})
export class MapPolygonComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    center: google.maps.LatLngLiteral = {
        lat: 24,
        lng: 12
    };
    zoom = 4;
    vertices: google.maps.LatLngLiteral[] = [{
        lat: 13,
        lng: 13
    }, {
        lat: -13,
        lng: 0
    }, {
        lat: 13,
        lng: -13
    }, ];
}
<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom">
  <map-polygon [paths]="vertices"></map-polygon>
</google-map>
npm start

You will see the below mentioned O/P on your browser at http://localhost:4200/

5.6 GOOGLE MAP RECTANGLE

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-map-rectangle',
    templateUrl: './map-rectangle.component.html',
    styleUrls: ['./map-rectangle.component.css']
})
export class MapRectangleComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    center: google.maps.LatLngLiteral = {
        lat: 24,
        lng: 12
    };
    zoom = 4;
    bounds: google.maps.LatLngBoundsLiteral = {
        east: 10,
        north: 10,
        south: -10,
        west: -10,
    };
}
<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom">
  <map-rectangle [bounds]="bounds"></map-rectangle>
</google-map>

You will see the below mentioned O/P on your browser at http://localhost:4200/

5.7 GOOGLE MAP CIRCLE

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-map-circle',
    templateUrl: './map-circle.component.html',
    styleUrls: ['./map-circle.component.css']
})
export class MapCircleComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    center: google.maps.LatLngLiteral = {
        lat: 24,
        lng: 12
    };
    zoom = 4;
    circleCenter: google.maps.LatLngLiteral = {
        lat: 10,
        lng: 15
    };
    radius = 3;
}
<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom">
  <map-circle [center]="circleCenter"
              [radius]="radius"></map-circle>
</google-map>
npm start

You will see the below mentioned O/P on your browser at http://localhost:4200/

NOTE: The circle radius is very small. We will need to zoom outward.

5.8 GOOGLE MAP GROUND OVERLAY

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-map-ground-overlay',
    templateUrl: './map-ground-overlay.component.html',
    styleUrls: ['./map-ground-overlay.component.css']
})
export class MapGroundOverlayComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    center: google.maps.LatLngLiteral = {
        lat: 24,
        lng: 12
    };
    zoom = 4;
    imageUrl = 'https://angular.io/assets/images/logos/angular/angular.svg';
    imageBounds: google.maps.LatLngBoundsLiteral = {
        east: 10,
        north: 10,
        south: -10,
        west: -10,
    };
}
<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom">
  <map-ground-overlay [url]="imageUrl"
                      [bounds]="imageBounds"></map-ground-overlay>
</google-map>
npm start

You will see the below mentioned O/P on your browser at http://localhost:4200/

5.9 GOOGLE MAP KML LAYER

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-map-kml-layer',
    templateUrl: './map-kml-layer.component.html',
    styleUrls: ['./map-kml-layer.component.css']
})
export class MapKmlLayerComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    center: google.maps.LatLngLiteral = {
        lat: 24,
        lng: 12
    };
    zoom = 4;
    kmlUrl = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
}
<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom">
  <map-kml-layer [url]="kmlUrl"></map-kml-layer>
</google-map>
npm start

You will see the below mentioned O/P on your browser at http://localhost:4200/

5.10 GOOGLE MAP TRAFFIC LAYER

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-map-traffic-layer',
    templateUrl: './map-traffic-layer.component.html',
    styleUrls: ['./map-traffic-layer.component.css']
})
export class MapTrafficLayerComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    center: google.maps.LatLngLiteral = {
        lat: 24,
        lng: 12
    };
    zoom = 4;
}
<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom">
  <map-traffic-layer [autoRefresh]="false"></map-traffic-layer>
</google-map>
npm start

5.11 GOOGLE MAP TRANSIENT LAYER

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-map-transit-layer',
    templateUrl: './map-transit-layer.component.html',
    styleUrls: ['./map-transit-layer.component.css']
})
export class MapTransitLayerComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    center: google.maps.LatLngLiteral = {
        lat: 24,
        lng: 12
    };
    zoom = 4;
}
<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom">
  <map-transit-layer></map-transit-layer>
</google-map>
npm start

You will see the below mentioned O/P on your browser at http://localhost:4200/

5.13 GOOGLE MAP DIRECTION RENDERER

When looking for a path between two locations on a map, utilise the MapDirectionsService. The path is shown on the map using the MapDirectionsRenderer. This is the component and class’s most frequent use-case.

import { Component, OnInit } from '@angular/core';
import {MapDirectionsService} from '@angular/google-maps';
import { map, Observable } from 'rxjs';

@Component({
    selector: 'app-map-directions-renderer',
    templateUrl: './map-directions-renderer.component.html',
    styleUrls: ['./map-directions-renderer.component.css']
})
export class MapDirectionsRendererComponent implements OnInit {
    ngOnInit(): void {}
    center: google.maps.LatLngLiteral = {
        lat: 24,
        lng: 12
    };
    zoom = 4;
    readonly directionsResults$: Observable < google.maps.DirectionsResult | undefined > ;
    constructor(mapDirectionsService: MapDirectionsService) {
        const request: google.maps.DirectionsRequest = {
            destination: {
                lat: 12,
                lng: 4
            },
            origin: {
                lat: 14,
                lng: 8
            },
            travelMode: google.maps.TravelMode.DRIVING
        };
        this.directionsResults$ = mapDirectionsService.route(request).pipe(map(response => response.result));
    }
}
<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom">
  <map-directions-renderer *ngIf="(directionsResults$ | async) as directionsResults"
                           [directions]="directionsResults"></map-directions-renderer>
</google-map>
npm start

5.14 GOOGLE MAP HEAT MAP LAYER

For a heat map, update the script reference and add a visualization library.

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFaXNvUSNlqQoqlNBgCgppWcSeYxb5kDM&libraries=visualization"></script>
JavaScript

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-map-heatmap-layer',
    templateUrl: './map-heatmap-layer.component.html',
    styleUrls: ['./map-heatmap-layer.component.css']
})
export class MapHeatmapLayerComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    center = {
        lat: 37.774546,
        lng: -122.433523
    };
    zoom = 12;
    heatmapOptions = {
        radius: 5
    };
    heatmapData = [{
        lat: 37.782,
        lng: -122.447
    }, {
        lat: 37.782,
        lng: -122.445
    }, {
        lat: 37.782,
        lng: -122.443
    }, {
        lat: 37.782,
        lng: -122.441
    }, {
        lat: 37.782,
        lng: -122.439
    }, {
        lat: 37.782,
        lng: -122.437
    }, {
        lat: 37.782,
        lng: -122.435
    }, {
        lat: 37.785,
        lng: -122.447
    }, {
        lat: 37.785,
        lng: -122.445
    }, {
        lat: 37.785,
        lng: -122.443
    }, {
        lat: 37.785,
        lng: -122.441
    }, {
        lat: 37.785,
        lng: -122.439
    }, {
        lat: 37.785,
        lng: -122.437
    }, {
        lat: 37.785,
        lng: -122.435
    }];
}
<google-map height="400px" width="750px" [center]="center" [zoom]="zoom">
  <map-heatmap-layer [data]="heatmapData" [options]="heatmapOptions"></map-heatmap-layer>
</google-map>
npm start

You will see the below mentioned O/P on your browser at http://localhost:4200/

MAP GEOCODER AS SERVICES

To utilise the MapGeocoder, the Google Cloud Console’s Geocoding API needs to be enabled on the same project as the one where the Google Maps JavaScript API is set. Additionally, an API key with billing enabled is necessary.

import { Component, OnInit } from '@angular/core';
import { MapGeocoder } from '@angular/google-maps';

@Component({
    selector: 'app-geocoder',
    templateUrl: './geocoder.component.html',
    styleUrls: ['./geocoder.component.css']
})
export class GeocoderComponent implements OnInit {
    constructor(geocoder: MapGeocoder) {
        geocoder.geocode({
            address: '1600 Amphitheatre Parkway, Mountain View, CA'
        }).subscribe(({
            results
        }) => {
            console.log(results);
        });
    }
    ngOnInit(): void {}
}

I would greatly appreciate it if you would support me if have you enjoyed this post and found it useful. Thank you in advance.

Umang Ramani

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories