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;
  15. coordinates: any[];
  16. checkedAll: boolean;
  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. ],
  27. zoom: 7,
  28. center: L.latLng(44.84250741, -92.87455677)
  29. };
  30. polyLayer: any;
  32. constructor(private http: HttpClient) { }
  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. }
  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.