Ionic 3/4 | Adding Google Maps SDK Cordova Plugin in Ionic 4 Application

As we have already discussed How to Add Google Maps using JavaScript API in Ionic Applications, in this post we will implement Google Maps Cordova plugin using SDK. In comparison to JavaScript API Native SDK, Google Maps are more fast and efficient in terms of performance in mobile applications. Ionic Native Google Maps have more features which we can implement in a fully featured mobile application with Google Maps like in Native Android or IOS applications. We can easily implement following in Google Maps using this Native Cordova plugin.

– Shapes like circle
– Geocoding
– Custom Draggable Marker and Clusters
– Custom elements like polygon and polylines
– Street Views

and much more…

Here we will create an Ionic 4 Application and Implement Ionic Native Google Maps Plugin. As Ionic version 4 is still in beta phase so we will add a beta version of the Google Maps plugin.

Let’s get started!

Create a new application using Ionic CLI

To create an application you must have NodeJS and Ionic Cordova CLI

Run the following command to create a new application

for Ionic 3 just remove  --type=angular

Install Ionic Native Google Maps Cordova and Ionic Native  Plugin

Run following commands in application root to install Cordova in Ionic native plugin. We also need Google API Key to integrate Google Maps API in the application.

Visit here to know more on How to Get Google API Key?

for Ionic 3 run following

 

Set Environment Variables in the Application Component

In the app.component.ts file, replace following code with environment variables set with Google API Key.

 

Load map and initialize in canvas on the homepage

In home.page.ts component file call method to load and draw the map in div “map_canvas”

In home.page.html add following HTML div to load maps.

Add the following style to give height and width to Map container in home.page.scss file.

Now its done from the code point of view we will now successfully load a simple map in div we defined.

Now you can check your map by running following command

instead of  $ ionic serve --open otherwise it will give the following error

You can check the demo project and other samples here for Ionic’s version 4 and here for Ionic 3 Demo code

6 thoughts on “Ionic 3/4 | Adding Google Maps SDK Cordova Plugin in Ionic 4 Application”

    1. You can run the following command after connecting your device with PC through USB
      $ ionic cordova run android –device

  1. Hi,
    Its a huge help for me. i been searching for ionic maps native. Do you happen to know how to add multiple marker on maps?

    Thanks

Leave a Reply

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