Implementing Native Google Maps in an Ionic Application

Google Maps is the king when it comes to Geolocation and Mapping.
Many companies like Uber or Lyft are using Google’s technology to rapidly kickstart awesome applications.
In this tutorial we will see how we can quickly create our own application with Ionic’s Google Maps Native plugin.

We will create a restaurant mapping application, the user will be able to look for specific restaurants we will place on our map and view in a separate Page what the restaurant offers.

Our plan here is to:

  1. Display a map with a marker that represents the restaurant
  2. Load multiple markers on this map
  3. Handle events on those markers
  4. Transition to another area that contains a restaurant’s information

Before diving into the code, some setups are required.

The Google Developer Console

An account for the Google Developer Console is required, you can get one for free there.

Create a new project:

Ionic Google Maps Geolocation add project rect

Once this is done, the Google Maps API is required in the Library menu:

Ionic Google Maps Geolocation select api

Choose what you need: iOS or Android.

And enable the service:

Ionic Google Maps Geolocation select api enableFinally copy the API’s key:

Ionic Google Maps Geolocation select api copy key

We can now get our hands dirty!

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

One Map, One Marker

Starting with installations:

Nothing new here, just a new project with the Cordova and Ionic plugins using the Google Maps API key we created above.

The home.html file is our starting point:

This div will contain our map area, it occupies the whole <ion-content> area and the reference #map will be used to grab this Element later.

A detour to the app.module.ts file to add the Native GoogleMaps Service:

And the imports in the home.ts file:

All of those imports are important.
ViewChild will allow us to grab the map Element from the DOM and the other ones from the @ionic-native/google-maps package will be used to create the map, positions, marker, etc.

Using ViewChild we grab the Element referenced as map from the DOM and stock it in a property named element.

We can now get down to business:

To be sure that everything is loaded, the work is done in the ngAfterViewInit hook and once the platform is ready.

When all the lights are green, the following initMap method is triggered:

We first create a new GoogleMap object by passing our map element to GoogleMaps’ create method.

Many tutorials skip the following part, which is very important.
We need to wait for the MAP_READY event to be triggered before doing anything, the one method will listen once for this event. On iOS this is not important, however, on Android forgetting this part can create some issues with the camera’s movements or markers creation.

Some coordinates are then created, I chose those ones because it’s an airport that has some Google Maps indoor plans and they look really nice! If you want to use your own Geolocation, you can have a look at this Ionic geolocation tutorial.

The camera must be moved to those coordinates otherwise we won’t see anything. This is done by using the animateCamera method which is kinda cool 😉.
The markerOptions requires a position and a title, the icon attribute is optional, you can use the default icon, but I’d rather go with a custom one.
Finally, using the markerOptions, a marker is created and the info bubble is shown.

If you have a black or white screen showing instead of the map, you might have to add this in the app.scss file:

Here is the first result:

Ionic Google Maps Geolocation one marker

Great, we just mastered how to integrate GoogleMaps and add a marker.
Let’s add more markers.

Multiple Markers

The markers data are available in an Amazon Web Service, you can use mine or you can go there to learn how to create a custom Amazon API.

We will need HttpModule to fetch the data so back to the app.module.ts file:

And back to the home.ts:

The API is called to acquire the restaurants data, once the data are received, the initMap method is called.

Some modifications to the method:

The camera’s position is set to the first restaurant’s position. After that, we loop on the restaurants to create multiple markers, each restaurant has its own position and title properties.

Now we have multiple markers!

Ionic Google Maps Geolocation two markers

Moving to the last part of the application: the restaurant’s details.

BONUS CONTENT
Enter your email address in the box below to get access to this tutorial (and others) source code.

Marker Interaction

All the information can be displayed in one new RestaurantPage.

The restaurant.html file is very simple:

For now we only display an “under construction” image and some text to inform the user that the restaurant is not yet opened.

Going back to the initMap method, this restaurant view will be shown once the user taps on the info bubble:

The markerOptions variable is modified, a new infoClick callback is added to move the user to another page.

And Voila!

Ionic Google Maps Geolocation scenario 2

Conclusion

Adding Google Maps to an Ionic application is fairly easy.
There are some pitfalls to avoid, the most important one is: waiting for the device and the map to be ready. Another one is the background transparency.
Once you have those rules in the back of the head, you can create the area in the HTML file where the map will be shown, grab it, create the map there, move the camera to the good Geolocation and position the markers.
From here the sky is the limit, you can add more interactions with the markers, change the icons to represent a car, make them move and so much more!

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *

0 Shares