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

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

10
Leave a Reply

avatar
2 Comment threads
2 Thread replies
4 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Jolly.exeRayAnonymous Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Anonymous
Guest
Anonymous

How can I run this project in android device?

Ray
Guest
Ray

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

Moutasem
Guest
Moutasem

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?

Fahmi
Guest
Fahmi

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

Akshat singh
Guest
Akshat singh

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

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

Ravi Singh
Guest
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.

Renju
Guest
Renju

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