Ionic Integrating Google Map SDK

In many of mobile apps and modern web app allow us to utilize different mapping features such as showing the current location, add a marker with text and creating routes. We can achieve this feature through the use of Google Map Cordova plugin.

In ionic we can use an abstract all mapping functions into a new <ion-map> directive and $ionicMap delegate. In last an example, we have Google map integration in Ionic through Javascript Google map library. Here in this example, we will integrate the Google map SDK in our ionic apps.

Step 1: Step up the project: 

ionic start googleMap blank

Step 2: Setting up Google Map API in Google Developer Console

In order to use the Google Maps API, you must register your application on the Google Developer Console and enable the API. To do this, start by going to the Google Developer Console for Google API for the map. If you already have a project created, you can skip the next section. If not, you can follow along and create a new project for your maps application. 
We need to enable the Google Maps SDK for iOS or the Google Maps Android API, or both. Let’s select the Google Maps SDK for an Android for this example. In the Google developer console find the API library and select Google Maps Android API and we have to enable the API. In the dashboard, we have to click on credential to create API key for our project and select key restriction for Andriod. For the android, we have specified the package name and SHA-1 certificate fingerprint. Copy package name from our AndroidManifest.xml file. We can generate SHA1 from the following command on cmd as

C:\Users\Username>keytool -exportcert -list -v -alias androiddebugkey -keystore .android/debug.keystore

Once we have specified both the project name and SHA-1. We can have to install Google map Cordova plugin and have to specify the API in for plugin.

ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="Add your code"

npm install --save @ionic-native/google-maps