Google Map Integration with Polylines in Angular App

Google Maps Angular

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

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-maps
npm i @agm/core
npm 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 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 Map on your screen.

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

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

You can access the whole project from here.