Ionic 4 | Add Google Maps JavaScript API, Geolocation and Geocoder in Ionic 4 Native Application

In the previous post, we discussed how to get location coordinates using Geolocation and then converting those coordinates into understandable addresses. But adding a map in a mobile application really adds much value making it more useful and interactive. Google Map API can be used to add fully featured maps anywhere, In this post, we will implement Maps in Ionic 4 Application and also use Geolocation and Geocoder plugin to fetch device location then fetch Address available for those coordinates we get.

Here I am going to create an Ionic Application with Google Maps, having a location pointer in the center of the map, a user can drag, pan or zoom map to get an address at that location.

We are going to create Ionic Application in latest version 4, it is still in beta phase but soon it will be available as a stable version. But all steps will remain almost the same.

Let’s get started!

Also Check: Ionic 4 | Turn on Device GPS in Ionic 4 Application Without Leaving App


First, we will start with a new project.

Create a new Ionic 4 Application

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

Run the following command to create a new application

Add Goolge Maps API in Ionic Application

Google Maps JavaScript API can be used in web applications, but now it needs an API key to use it. To know more on how to get API Key visit this link.

Now open index.html at the root of your Ionic Application, then add the following script with your key in head section

Install Geolocation and Geocoder Cordova and Ionic Native plugins

Geolocation plugin will fetch coordinates of the device in form of latitude and longitude, after that we will convert these coordinates in addresses using Geocoder plugin.

Run following commands to install these plugins.



Import Plugins in Application Module.

After import and adding in provider app.module.ts file will look like this


Add Google Map in Homepage

To show Google maps in homepage we need to add a placeholder for the map in which we will load Google Map.

In the header section, there will be a button to move maps to the current location of the device. There is another section below the map to show the address of pointer location on the map.

an image tag will load a marker image in the center of the map, as we will get coordinated from the map’s central location. We have added #map to map placeholder to send reference in the component.

Now we will modify home component file to load Google maps. Replace following code in file.

Here we will call loadMap method which in turn call getCurrentPosition method to get current location coordinates to load Google Maps with center location set to Latitude and Longitude received in Geolocation method.

getAddressFromCoords method will get Lattitude and Longitude values to return Addresses available using Geocoder’s method reverseGeocode, in this method I have added some JS login to create comma separated address from JSON object of address.

Here I have added map’s event listener tilesloaded to get coordinates on Google Map Center to find an address. This event is fired when all tiles are loaded.

Style the Map

In, add following CSS style for center pointer mark, map container height and address styling


So as you can see how simply we can mixed Google Map and  Cordova’s plugins to create an application feature to see current of any location and also check address at that point.


Leave a Reply

8 Comment threads
7 Thread replies
Most reacted comment
Hottest comment thread
12 Comment authors
Zafri ZulkifleeJojiheAshRuanVikash Recent comment authors
newest oldest most voted
Notify of
Luisandro Nachtigal Bandeira

This not work on device.

Ana Karol
Ana Karol

Olá!!! Parabéns pela iniciativa!! Gostaria de saber qual a diferença de usar o Reverse Geocoder nativo e o provido pela API do Google Maps, vc pode me ajudar? No sentido de vantagens e desvantagens… Qual vc considera melhor?

Muhammad Syafie
Muhammad Syafie

Do you know how can i get qibla finder from google into my mobile app?
im using ionic 4


Error: Unexpected value ‘Geolocation’ imported by the module ‘AppModule’. Please add a @NgModule annotation.

i get this error. and shows a blank screen


Hello, I managed to input all the codes in and no errors were found. I got my API key. I input it just the way you did but somehow I could not run it. It says, “This page didn’t load Google Maps correctly. See the JavaScript console for technical details.” Please help, thank you!

hunter melnick
hunter melnick

i am having an issue that the @ViewChild(‘map’) is expecting two arguments, the code runs but because of this error i am unable to run ng build or compile anything. Do you have a fix with the arguments that I can plug in there? I tried to declare some options and plug them in there but nothing was working. If you could please shoot me an email I would really appreciate it. Thankyou


@ViewChild(‘mapElement’, { static: true }) mapElement: ElementRef;


I solucioned with


This doc is out of date. Bunch of things have been updated and doesn’t work any more

Zafri Zulkiflee
Zafri Zulkiflee

Hi, Thank you for providing such an amazing tutorial.

However I have an issue with NativeGeocoderReverseResult, this the error message:

“node_modules/@ionic-native/native-geocoder/ngx”‘ has no exported member ‘NativeGeocoderReverseResult’.”

how to solve this error?
is it mean that there no longer have ‘nativeGeocorderReverseResult’ for ionic? I hope you can help me.

Thank you in advance.