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.

Geolocation

Geocoder

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 home.page.ts 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 home.page.scss, 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.

 

3
Leave a Reply

avatar
2 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Ana KarolJolly.exeLuisandro Nachtigal Bandeira Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Luisandro Nachtigal Bandeira
Member

This not work on device.

Ana Karol
Guest
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?