Implement Google Maps In Angular 8 Application With Multiple Polygons

Introduction

 
In this article, we will integrate Google maps using leaflet in Angular 8. In Google maps we will also check how to mark multiple polygons and many other features.
 
Prerequisites
  • Basic knowledge of Angular
  • Visual Studio Code must be installed
  • Angular CLI must be installed
  • Node JS must be installed

Create Angular project

 
Step 1
 
Create a new Angular project using the following NPM command:
  1. ng new GoogleMapsExample    
Step 2
 
Open the newly-created project in Visual Studio code and install leaflet and @asymmetrik/ngx-leaflet by using the below command, 
  1. npm install leaflet  
  1. npm install @asymmetrik/ngx-leaflet  
Step 3
 
Now, let's create a new component, by using the following command.
  1. ng g c google-maps  
Step 4
 
Now Open style.css file and import the command for leaflet.
  1. @import "~leaflet/dist/leaflet.css";
Step 5
 
Now open google-maps.component.html file and add the following code. 
  1. <div class="row">  
  2.    <div class="col-12 col-md-12">  
  3.       <div class="card">  
  4.          <div style="height: 400px; width: 600px;z-index: 0;" leaflet [leafletOptions]="options"  
  5.          (leafletMapReady)="onMapReady($event)">  
  6.          </div>  
  7.       </div>  
  8.    </div>  
  9. </div>  
Implement Google maps In Angular 8 Application With Multiple Polygons
 
Step 6
 
Next step is to  open google-maps.component.tsfile and add the following code.  
  1. import { Component, OnInit } from '@angular/core';  
  2. import * as L from 'leaflet';  
  3. import 'leaflet/dist/images/marker-shadow.png';  
  4. import 'leaflet/dist/images/marker-icon.png';  
  5. import { HttpClient } from '@angular/common/http';  
  6. @Component({  
  7.   selector: 'app-google-maps',  
  8.   templateUrl: './google-maps.component.html',  
  9.   styleUrls: ['./google-maps.component.css']  
  10. })  
  11. export class GoogleMapsComponent implements OnInit {  
  12.   map: L.Map;  
  13.   json;  
  14.   
  15.   coordinates: any[];  
  16.   checkedAll: boolean;  
  17.   
  18.   Parcel: { type: string; coordinates: any[][]; };  
  19.   options = {  
  20.     layers: [  
  21.       L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {  
  22.         maxZoom: 18,  
  23.         attribution: ""  
  24.       })  
  25.     ],  
  26.   
  27.     zoom: 7,  
  28.     center: L.latLng(44.84250741, -92.87455677)  
  29.   };  
  30.   polyLayer: any;  
  31.   
  32.   constructor(private http: HttpClient) { }  
  33.   
  34.   ngOnInit() {  
  35.   }  
  36.   onMapReady(map: L.Map) {  
  37.     this.http.get("../../assets/geo.json").subscribe((json: any) => {  
  38.       this.json = json;  
  39.       L.geoJSON(this.json).addTo(map);  
  40.     });  
  41.   }  
  42.   
  43. }  
Implement Google maps In Angular 8 Application With Multiple Polygons
 
Step 7
 
Here we need to add one file inside assets folder which includes the coordinates of our polygon to mark it using lattitude and longitude inside Google maps. 
  1. {  
  2.     "type""FeatureCollection",  
  3.     "features": [  
  4.         {  
  5.             "type""Feature",  
  6.             "geometry": {  
  7.                 "type""Polygon",  
  8.                 "coordinates": [  
  9.                     [  
  10.                         [  
  11.                             -92.87455677,  
  12.                             44.84250741  
  13.                         ],  
  14.                         [  
  15.                             -71.92272749,  
  16.                             42.05788857  
  17.                         ],  
  18.                         [  
  19.                             -76.5222217,  
  20.                             42.21376479  
  21.                         ],  
  22.                         [  
  23.                             -118.392574,  
  24.                             34.90610058  
  25.                         ],  
  26.                         [  
  27.                             -118.357862,  
  28.                             34.92238101  
  29.                         ],  
  30.                         [  
  31.                             -92.87034201,  
  32.                             44.8424824  
  33.                         ],  
  34.                         [  
  35.                             -76.52466778,  
  36.                             42.21414843  
  37.                         ],  
  38.                         [  
  39.                             -81.7955797,  
  40.                             35.37536327  
  41.                         ],  
  42.                         [  
  43.                             -118.358777,  
  44.                             34.9283572  
  45.                         ],  
  46.                         [  
  47.                             -118.3612655,  
  48.                             34.90435932  
  49.                         ],  
  50.                         [  
  51.                             -71.87641133,  
  52.                             42.16390113  
  53.                         ],  
  54.                         [  
  55.                             -71.92550509,  
  56.                             42.05749863  
  57.                         ]  
  58.                     ]  
  59.                 ]  
  60.             },  
  61.             "properties": {  
  62.                 "code""53",  
  63.                 "nom""Mayenne"  
  64.             }  
  65.         }  
  66.     ]  
  67. }  
Inside asstes folder save this file as geo.json
 
Output
 
Implement Google maps In Angular 8 Application With Multiple Polygons
 

Conclusion

 
So in the output image we can see the polygons for multiple coordinates inside Google maps; likewise we can draw circle label ect using ngx-leaflet.
 
I hope you have enjoyed this article as much as I have enjoyed writing and coding the examples.
 
Please let me know how to improve it.


Recommended Ebook

Angular 4.0 - A Complete Study Guide

Download Now!
Similar Articles