Written ByKaran Bhatt

Development

Published:Thu Feb 23 2023

15 mints read

Summary

Google Maps integration with polylines in an Angular app involves creating a web application that utilizes the Google Maps JavaScript API to display maps and draw polylines. Polylines are lines drawn on the map to represent routes, paths, or any connected sequence of points. Here's a concise summary of the process:

Hello there, so I needed to use Google Maps in my Angular App and found a couple of Third Party Libraries which were really good, an example of that would be Angular Google Maps (AGM).

Table of contents

1. Prerequisites.

2. Markers & polylines on destinations.

3. Adding markers to the array.

4. Advanced prototyping

5. Overall User Experience

6. Conclusion

1. Prerequisites

• Node installed on your machine
• NPM installed on your machine
• Installing Angular CLI 10: npm install -g @angular/cli
• Creating your Angular 10 Project: ng new angular-example

Now, I’m assuming you already have your Angular application set up and your google maps API key. If not, go do that quickly and come back here.

You can get your API Key here.

https://developers.google.com/maps/documentation/javascript/get-api-key

First, import the Google Maps SDK in your index.html.You must include your API Key in the script tag as shown below.

<script
src="https://maps.googleapis.com/maps/api/js?key=**YOUR_API_KEY**&libraries=places&language=en&v=weekly">
</script><script src="https://maps.googleapis.com/maps/api/geocode/json?key=**YOUR_API_KEY**"></script>

Next, install Google Maps & AGM packages.

npm i @angular/google-mapsnpm i @agm/corenpm i @types/googlemaps

That’s it for the setup, now let’s get to the cool stuff.

Okay, create a wrapper for the map in your component’s HTML file.

<div class="main">
  <div #mapel id="map"></div>
</div>

OR you can directly place <google-map> tag and give it any height according to your requirement.

<google-map #mapel height="50%" width="100%" [zoom]="zoom" [center]="center"></google-map>

You can assign zoom any integer value according to your convenience.

Finally, do the magic in the component’s TS file.

To create a class variable that we can use to access the map instance,

map: google.maps.Map;
@ViewChild('mapel', {static: false}) googlemaps: map;

To create an element reference to the map wrapper in the HTML file,

ngAfterViewInit() {  
this.initializeMap();
}

I’m sure you’re familiar with angular’s ngAfterViewInit() function or lifecycle hook, which is a callback method of angular’s AfterViewInit abstract class that is invoked immediately after Angular has completed the initialization of a component’s view. It is invoked only once when the view is instantiated. So the function initializeMap() is called when the component’s view has been initialized.

So let’s demystify the initializeMap() function.

const bounds = new google.maps.LatLngBounds();

This will bring Google Maps on your screen.

2. MARKERS & POLYLINES ON DESTINATIONS:

Now to get to the current position and add a marker on it,

navigator.geolocation.getCurrentPosition((position) => {  
const center = {                                        
lat: position.coords.latitude,                    
lng: position.coords.longitude,
};
this.googleMapService.currentLocation.next(center);
this.addMarker(position.coords.latitude, position.coords.longitude);
});

Load this function on ngOnInit() of the component and give this center position to attribute in the center in the google-map component. HTML will show the current location as soon as the component gets loaded.

3. Adding markers to the array

<google-map #mapel height="50%" width="100%" [zoom]="zoom" [center]="center">
<map-marker *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label" [title]="marker.title"[options]="marker.options"></map-marker>
</google-map>

As you add the destinations from the input shown above, it keeps pushing it into the array which will contain each marker with its coordinates of the latitude & longitude.

To connect the lines joining each marker we use <map-polyline> which has the options attribute. Here we have defined options as,

polylineOptions = {
path: [],
strokeColor: '#32a1d0',
strokeOpacity: 1.0,
strokeWeight: 2,
};

We can assign values to strokeColor, strokeOpacity, and strokeWeight as per convenience. Path property is an array that has all the positions of markers. Using it, the map-polyline tag draws the lines joining each destination added. We have to place it inside google-map like it has been shown below. This is how your final google-map component HTML looks like.

<google-map #mapel height="50%" width="100%" [zoom]="zoom" [center]="center">
 <map-marker *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label" [title]="marker.title"   [options]="marker.options"> </map-marker> <map-polyline [options]="polylineOptions">
 </map-polyline> 
</google-map> 

3. Conclusion

In conclusion, integrating Google Maps with polylines in an Angular app allows you to create interactive and visually appealing maps that display routes, paths, or any connected sequence of points. By leveraging the power of the Google Maps JavaScript API and Angular's components, you can provide users with an engaging experience while visualizing geographical data.