Google Maps, Places and Autocomplete in your Ionic 5 app

Image for post
Image for post

One of the most used and required features in apps is the ability of locating something in a map, such a review, a company, an event, or just a simple location finder. Let’s create our own service and integrate the most popular and interesting features that google maps offers to us on this topic and let’s get the most out of it.

Image for post
Image for post

By the way! if you like or you think this article is good for you don’t forget to clap & subscribe!. You can also help me joining me on Patreon inviting me to a coffee or beer so I can keep producing these articles.

Google goes far beyond a simple map, it offers loads of metadata that may be really useful or even necessary in order to implement powerful features in our app.

What do we need?

Honestly? not a lot, we just need a blank Ionic project with a ocuple of plugins (Geolocation*, Native Geocoder*) and a API key de google places, it’s a bit annoying to get but we really need it if we want to make proper queries to Google.

*Son opcionales para las funcionalidades extras.

Let’s Start

ionic start Ionic5GooglePlaces blank --type=angular
cd Ionic5GooglePlaces
ionic cordova plugin add cordova-plugin-nativegeocoder
npm install @ionic-native/native-geocoder
ionic cordova plugin add cordova-plugin-geolocation
npm install @ionic-native/geolocation

That’s should be it! wasn’t that hard huh?

Let’s code!

Firstly, let’s prepare our app.module.ts so it doesn’t bother later on and we can focus on our magic.

Then let’s implement our API key at index.html adding it at the end of our index.html file within an script tag. This is important so google let us use their service and show the map properly.

Yeah, I can tell it’s not that easy from now… So keep your mind focus it won’t take you longer than 5 min to understand what’s going on with the functions I’m showing and trust me, if you get this you will be mastering this topic and you can extend the functionalities to the infinite!!

We are going to set up everything in home.page.ts. All of these functions well be helping us to create and interact with the map and the data we may need

  1. LoadMap(): We will load a map from Google straight forward, nothing crazy here, we are just placing the center of the map on the coordinates we recieve from our Geolocation Plugin.
  2. ShowCords(): When we press the info button it will show us the coordinates in the center of the map, not really User-friendly of course this data will work behind the scenes in your apps and can be really useful.
  3. UpdateSearchResuls(): First we put the logic in place that will let show the list. Straight after that we will just use the available method from Google: `google.maps.places.AutocompleteService().getPlacePredictions` using as an trigger & input the ion-search bar.
  4. SelectSearchResult(item): We call this functions on from the items generated on the previous array. In this case we will display an alert will all the metadata that Google will provide about that Place.
  5. GoTo(): Simple example to open GoogleMaps with URL and placeID as a parameter.

let’s add a single view to show all of this with home.page.html. It’s not too complex, search-bar in the header, couple of buttons and of course… The map.

Let’s make it look a bit better with home.page.css, I just had a look at an old tutorial

By the way! if you like or you think this article is good for you don’t forget to clap & subscribe!. You can also help me joining me on Patreon inviting me to a coffee or beer so I can keep producing these articles.

Testing time!

A per all the ionic apps we can ionic cordova run on our device or favourite emulator,

In my case, let’s do it android… it’s faster!

ionic cordova run android

If everything was well then you should be able to see this interfaces.

Image for post
Image for post

Obviosly instead of having just alerts we could have more advance functions such as uploading data to firebase or do any operation we may need or want! let your imagination fly! :P

I hope you enjoyed this! don’t forget to clap and or subscribe so I can keep producing content.

Written by

Entrepreneur and huge ionic fan! I worked for one of the most successful software startups and one of top tech companies. But it was time to build my own path.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store