How to implement an address search with Angular and Google Maps

Kevin Kreuzer
6 min readJun 29, 2021

With more than a billion monthly users, Google Maps is one of the most used/known applications. Since Angular version 9, it’s also available as an Angular component.

At the time of writing this article, the docs on the official @angular/google-maps repo are very minimalistic. The reason for that is that @angular/google-maps is just an Angular wrapper of the official GoogleMaps. To implement features you often have to consult the official Google Maps API docs.

Some developers I talked to found this confusing. Some of them felt lost when implementing a feature that uses Google Maps in Angular.

Lately, I myself have had to implement a feature using Google Maps. After successfully having implemented my feature, I decided to write this post to make your life easier.

What is it about?

In this blog post, we will learn how to implement a Google Map with a search box and an address autocompletion.

--

--

Kevin Kreuzer

Passionate freelance frontend engineer. ❤️ Always eager to learn, share and expand knowledge.