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:

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, 

npm install leaflet

npm install @asymmetrik/ngx-leaflet

Step 3

 

Now, let's create a new component, by using the following command.

ng g c google-maps

Step 4

 

Now Open style.css file and import the command for leaflet.

@import "~leaflet/dist/leaflet.css";

Step 5

 

Now open google-maps.component.html file and add the following code. 

<div class="row">
   <div class="col-12 col-md-12">
      <div class="card">
         <div style="height: 400px; width: 600px;z-index: 0;" leaflet [leafletOptions]="options"
         (leafletMapReady)="onMapReady($event)">
         </div>
      </div>
   </div>
</div>

 

Step 6

 

Next step is to  open google-maps.component.tsfile and add the following code.  

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet/dist/images/marker-shadow.png';
import 'leaflet/dist/images/marker-icon.png';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-google-maps',
  templateUrl: './google-maps.component.html',
  styleUrls: ['./google-maps.component.css']
})
export class GoogleMapsComponent implements OnInit {
  map: L.Map;
  json;

  coordinates: any[];
  checkedAll: boolean;

  Parcel: { type: string; coordinates: any[][]; };
  options = {
    layers: [
      L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        maxZoom: 18,
        attribution: ""
      })
    ],

    zoom: 7,
    center: L.latLng(44.84250741, -92.87455677)
  };
  polyLayer: any;

  constructor(private http: HttpClient) { }

  ngOnInit() {
  }
  onMapReady(map: L.Map) {
    this.http.get("../../assets/geo.json").subscribe((json: any) => {
      this.json = json;
      L.geoJSON(this.json).addTo(map);
    });
  }

}

 

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. 

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -92.87455677,
                            44.84250741
                        ],
                        [
                            -71.92272749,
                            42.05788857
                        ],
                        [
                            -76.5222217,
                            42.21376479
                        ],
                        [
                            -118.392574,
                            34.90610058
                        ],
                        [
                            -118.357862,
                            34.92238101
                        ],
                        [
                            -92.87034201,
                            44.8424824
                        ],
                        [
                            -76.52466778,
                            42.21414843
                        ],
                        [
                            -81.7955797,
                            35.37536327
                        ],
                        [
                            -118.358777,
                            34.9283572
                        ],
                        [
                            -118.3612655,
                            34.90435932
                        ],
                        [
                            -71.87641133,
                            42.16390113
                        ],
                        [
                            -71.92550509,
                            42.05749863
                        ]
                    ]
                ]
            },
            "properties": {
                "code": "53",
                "nom": "Mayenne"
            }
        }
    ]
}

Inside asstes folder save this file as geo.json

 

Output

 

 

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.