WhatsApp like location sharing with Ionic

Digvijay Singh
Sep 1, 2017 · 4 min read

We are very much familiar with WhatsApp. It has become the vital part of our life since its launch. WhatsApp has many functionality and one of its functionality is location sharing. Each and every one of us have used this at least once.

So by taking not much of your time let me share with you my experience of creating WhatsApp like location sharing with Ionic.

Requirement:-

  • Google Places API
  • Geo-location plugin
  • Google Map Plugin

Google Places API :-

Firstly, all you need to do is to Enable Google Places API Web Service from here. This can be achieved by creating New Project.

Enter Your Project Name And Click “CREATE AND ENABLE API”

Secondly, after creating the New Project, it will give you the API Key.

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=geoCordinates&radius=500&key=YOUR_API_KEY

Above is the API to get nearby location

Parameters in the above API

  • location : You will send your geoCoordinates for example-30.6576864,76.733321
  • radius : Enter radius you want to cover in meters
  • key: Paste the key which you have received in Point number (ii)

Geolocation plugin :-

This plugin provides information about the device’s location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from the network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs. You can get this from here .

$ ionic cordova plugin add cordova-plugin-geolocation

1. You need to add the cordova plugin for Geolocation.

$ npm install --save @ionic-native/geolocation

2. This will help you install native library by node-modules.

3. Import the native plugin for geolocation in app.module.ts, and declare inside the Providers

import { Geolocation } from ‘@ionic-native/geolocation’;
....
providers: [
Geolocation
]

4. After declaring inside the Providers in app.module.ts, you can now access the plugin libraries wherever you want to.

In my case, I am using In Home Module

(a) Firstly, import the Geolocation in the home.ts

import { Geolocation } from ‘@ionic-native/geolocation’;

(b) Declare the Geolocation in the Constructor

constructor(private geolocation: Geolocation)

(c). Call the Geolocation API and get your current coordinates

this.geolocation.getCurrentPosition().then((geo) => {
// geo.coords.latitude
// geo.coords.longitude
}).catch((error) => {
console.log(error);
});

Google Map Plugin:-

This plugin uses the native Google Maps SDK Note: As of Ionic native 4.0, this is using the 2.0 version of the google maps plugin.

$ ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

You need to add the cordova plugin for Google Native Map. You also need to include API Key for Android and iOS . You can generate key for Android here And for iOS here. Below I am sharing the process for Android and same will go for iOS.

Generating Key For Android Map

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

This will help you install native library by node-modules. Import native plugin For googlemap in app.module.ts and declare inside the Providers

import { GoogleMaps } from ‘@ionic-native/google-maps’;
....
providers: [
GoogleMaps
]

After declaring inside the Providers in app.module.ts, you can now access the plugin libraries wherever you want to. In my case I am using In Home Module

(a) Firstly, import the GoogleMaps in the home.ts

import {GoogleMaps,GoogleMap,GoogleMapsEvent,GoogleMapOptions,CameraPosition,MarkerOptions,Marker} from ‘@ionic-native/google-maps’;

(b) Declare the GoogleMaps in the Constructor and assign GoogleMap, HTMLElement to the variables as shown below

export class HomePage { 
map: GoogleMap;
elementMap: HTMLElement;
constructor(private googleMaps: GoogleMaps){}
.......
}

(c) Call the GoogleMaps API and generate the map. Call the createMap() function and it will create the map.

createMap() {
this.mapElement = document.getElementById(‘map’);
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: latittudeCordinates,
lng: longittudeCordinates
},
zoom: 18,
tilt: 30
}
};
this.map = this.googleMaps.create(this.elementMap, mapOptions);
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
console.log(‘Map is Ready To Use’)
});
}

(d) In home.html all you need to add is

<ion-content>
<div #map id=”map”></div>
</ion-content>

(e) In home.scss you give the height to Map. In my case, I am giving 40% width

page-home {
#map {
height:40%;
}
}

By simply following the above steps, you can create WhatsApp like location sharing in your Ionic App. By some means, if you find any difficulty while implementing or you have any query, just comment below.

Viithiisys

Viithiisys Technologies

Digvijay Singh

Written by

Viithiisys

Viithiisys Technologies

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade