Post
Ask Question

How To Integrate Google Maps In Angular 14 App

In this tutorial, we will learn how to integrate Google Maps in angular 14 apps, as well as how to show markers on Google Maps in angular apps.

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>
npm start

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

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

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.12 GOOGLE MAP BICYCLE LAYER

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

@Component({
    selector: 'app-map-bicycling-layer',
    templateUrl: './map-bicycling-layer.component.html',
    styleUrls: ['./map-bicycling-layer.component.css']
})
export class MapBicyclingLayerComponent 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-bicycling-layer></map-bicycling-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

The MapDirectionsService is used to request a route between two places on a map. The MapDirectionsRenderer is used to display the route on the map. This is the most typical use-case for the component and class.

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>
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

The Google Cloud Console must have the Geocoding API enabled on the same project as the one that is set for the Google Maps JavaScript API in order to use the MapGeocoder. An API key with billing enabled is required as well. Details can be found here.

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 {}
}

The full reference to the API can be found in the Angular Google Maps API Docs.

SOURCE CODE

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

CORE KNOWLEDGE SHARING


Similar Articles