Member-only story
How to implement an address search with Angular and Google Maps
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.
So let’s play Product owner for a second and formulate our feature as a story:
As a user, I want to be able to search for a city or address. Once I select an address the center of the map should be changed to that address.
Sounds good. So we are going to create an Input field with some address auto-completion and a Google map underneath. Well, that may satisfy the user story. But hold on! There is another acceptance criteria coming from the designer in the form of a Mockup.
The search field and the according address autocompletion have to be placed inside the map.
Okay. How do we implement this? Let’s have a look!
