Integrating Google Maps in Angular 12

Hey! 👋

In the present article we will see how to add a google map into an Angular application using @angular/google_maps package.

Occasionally, we invest a lot of time trying to find a solution, and if we take the wrong approach, we may end up getting lost. To prevent that from happening, I will share some relevant links that can be useful and necessary..

Tip: when you search for a solution in the net, the first thing you should consider is choosing the right keywords, in our case, let’s say [ google maps; angular]

Tip (+): think to search in the official documentation like angular.io web site, npm packages, github projects .. etc

Sometimes you can find useful paths in github issues section, don’t be afraid to take a look upon it ;)

Great! Let’s walk through the solution

1- Important links

The npm package, updated one week ago. as mentioned, the @angular/google-maps package is already in the Angular Material repo

@angular/google-maps

components/README.md at master · angular/components

2- Using the Angular Google Maps component

Now we will follow exactly the same steps provided in the ReadMe file

Installation

To install, run npm install @angular/google-maps.

Loading the API

• First follow these steps to get an API key that can be used to load Google Maps.
• The Google Maps JavaScript API must be loaded before the GoogleMap component.

Now you can simply
import { GoogleMapsModule } from '@angular/google-maps'

In your module and use it in your declared components

//.html
<google-map [options]="options"></google-map>
//.ts
options: google.maps.MapOptions = {
  center: {lat: 40, lng: -20},
  zoom: 4
};

Note: after adding the script, you may need to restart the application, otherwise you can get an exception

So you shoud see now the map in your web application ! Amazing !

3- Discovering more the component

Let’s use some coponents provided by the Angular Google Maps library.

💡 We will add some spot markers on the map ( with a custom icon ) and make a proof of concept on how we can listen to the output events (in a practical use case ).

As a result we’ll get such a beautiful map

Now let’s change the marker icon, and show an alert message when clicking on a specific marker thus we can do what ever we want with the selected spot ;)

Note: Obviously! you can add an icon from your assets folder

Final result

So, we have intgrated google maps in our angular application and added some actions on the map-marker. That’s kinda all for our article!