Ionic 3 for Nearby Places
In the process of developing an App, which has a feature of Nearby Places, I tried out Ionic 3 Native-Geolocation and Google Maps APIs. Lot of us, must be trying to do something like this in their App. Here in this story, I’ll try to explain you that.
To start with, install the dependencies and packages required.
First you need to install the Cordova Plugin for Geolocation.
You can refer to ionic documentation . (I’m using Ionic 3)
ionic cordova plugin add cordova-plugin-geolocation — variable GEOLOCATION_USAGE_DESCRIPTION=”To locate you”
Then install the Package :
npm install — save @ionic-native/geolocation@4
Add this plugin to your app.module.ts file ::
import { Geolocation } from ‘@ionic-native/geolocation’;
providers: [
…
Geolocation,
…
]
Create a provider for the Location Service::
ionic generate provider locations
In location.ts, add the following code.
Import location service to the page’s ts file you want to show the Map. (For me nearby.ts)
Now you have got the Latitude and Longitude of the current location. Now you need to call the loadMap() to initiate the map.
If you need to pin certain places, use Google Maps Geocode API to get the Lat-Lng of those address.
In HTML page, just add <div #map id=”map”></div>
Annnndddd.. its done..!!
Bonus TIP::
To test your App in real devices, let it be Android or iOS, download Ionic DevApp. Trust me, to know its benefits, try it yourself.
Follow step-by-step. And at any point if you are stuck or need any help in implementing this, feel free to contact me or even if any change/correction is required. Just drop a mail with your query at [email protected]
