Ionic 3 Google Maps


Notice: A non well formed numeric value encountered in /home/ghadeerr/public_html/ghadeer.io/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

We are going to show how to implement google maps into our Ionic 3 application. Unlike most other plugins, we are going to need to generate a key from Google in order to use the Google Maps API.

The first thing we’ll need to do is head over to the google developer console: https://console.developers.google.com and to create an app that will let us use the google maps api. Configuring the keys is a little bit involved and will not be covered in this article, however I have created a step by step video tutorial you can be find here.

The rest of this article assumes that you have generated the required keys.

 We’ll get started by creating a tabbed project.

Next, we’ll add the cordova plugin and install the ionic native wrapper.

Now that we have our project setup and plugins installed, we can begin with the actual coding . The first step is to add the GoogleMaps provider to our app.
app.module.ts
Next, let’s head over to our home.html file and add a div that will render Google Maps.
We’ll add the following html snippet

We give the div a height of 100% so that it takes up the whole screen. We also use the #map; # allows our Angular Component to access the div using the @ViewChild decorator (more on this later).
Now, let’s head over to our home.ts file and setup the constructor and field properties.
What did we do?
We injected the GoogleMaps provider into our component as well as Platform.
The @ViewChild decorator is being used to render Google Maps into our div. The @ViewChild decorator  lets us to connect a DOM element to a property in our component so that we can reference the elements’ attributes and properties in our code.
Finally, we initialized a location object with a latitude and longitude. LatLng is a class that comes with GoogleMaps. The location we have created in our constructor will serve as the center point of our map.
Now it’s time to work with the Google Maps plugin to go to our location.
Step 1: We hook into Ionic 3’s ionViewDidLoad lifecycle event that tells us our component has loaded.
Step 2: Wait for platform.ready to signal that our cordova components are ready to be used
Step 3: Get a reference to our div so that google maps can render the map.
Step 4: Wait for the Google Maps MAP_READY event to fire
Step 5: Set the target location and move the camera there.

If we run this app on our device, we’ll see the map centered to the location we initialized in our constructor.

The next thing to do is to place a marker to represent our location (not just move the camera to our location, but also show a marker). We can write an addMarker function to accomplish this.

The addMarker function is fairly self-explanatory and customizable. The only thing to note is we are adding a click handler after the marker so that we can handle click events.

Our home.ts now looks like this.

And in under 15 minutes, we were able to integrate Google Maps into our Ionic 3 application. In the next example, we are going to show how to work with clusters (which is a grouping of markers) and how we can customize markers.

For those interested in a step by step explanation, the video tutorial can be found below:

If you enjoyed this article, enter your email below to get free updates!