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).
1.Prerequisites.
2.Markers & polylines on destinations.
3.Adding markers to the array.
4.Advanced prototyping
5.Overall User Experience
6.Conclusion
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.
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.
<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>
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.
Thank you for reading!305, Zodiac Square, Ahmedabad, India, 380054
Toronto, Ontario, Canada, M5V 3L9
20 Emma Place, Clifton, NJ, USA 07013