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 component file call method to load and draw the map in div “map_canvas”

In add following HTML div to load maps.

Add the following style to give height and width to Map container in 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

Leave a Reply

2 Comment threads
2 Thread replies
Most reacted comment
Hottest comment thread
3 Comment authors
Jolly.exeRayAnonymous Recent comment authors
newest oldest most voted
Notify of

How can I run this project in android device?


thank you! very useful example for the latest version, appreciate the post! ☀️


I do everything here andit’s working fine in browser, but when I try it on android device I only get a blank white page with the header only showing. I’ve tried putting a separate API key for the android SDK thats restricted to Android Maps SDK but it’s still not working. When I remove the code for getting the coordinates of the user the map works though and it shows the map with hard coded coordinates. Any idea for possible solutions?


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?


Akshat singh
Akshat singh

we are getting problem on map to show on android device and browser

> cordova.cmd run browser
Cannot find module ‘cordova-serve’

Ravi Singh
Ravi Singh

i follow your tutorial and (download your project from github) run on local machine
in browser it work but on android device map are not work nothing display.


Is it possible to download an area or region and save it as local using google map cordova plugin for offline using ?