Parse allows you to associate real-world latitude and longitude coordinates with an object. Adding a ParseGeoPoint to a ParseUser, you will be able to easily find out which user is closest to another, show the locations of the users of your app and also store the user’s location information, among other possibilities.

You can also associate a ParseGeoPoint to any ParseObject. For example, if your app is associated with a store with physical affiliates, you will be able to create a page to show the location of those stores or to show the user which store is closest to him. Another example of this association usage: if your app is a game in which you created ParseObjects to represent characters, adding ParseGeoPoints to these characters would allow them to be shown along the player’s path.

This tutorial explains how to use some features of ParseGeoPoint through Back4App.

After following this tutorial, you will be able to do this:

Install Angular Google Maps - AGM.

Import the SDK adding the generated key to ./src/app/app.module.ts.

To retrieve user’s location, we’ll need to install Ionic Geolocation plugin.

Now that we installed and imported Geolocation to providers at ./src/app/app.module.ts, let’s implement the get location method and store the results to a class attribute.

Now that we have the user location, let’s create a page to display the map, using the already mentioned [Angular Google Maps].

First, run the helper:

Let’s now make it receive a Marker that holds the current position the map is displaying and an array of Markers that will be the pin points around the map.

Let’s pull up the maps.html now and make it display the data.

Now we have a page to display the Map locations.

You can see how simple it is. Basically all we had to do is instantiate a query object for the User collection and make it look for the closest geo location by calling near().

Suppose that the example app you are building is associated with a group of stores with physical affiliates. It would be interesting to show all the physical affiliates of this store in the map. In order to do so create a Stores class on Back4pp Dashboard, save the existing stores as ParseObjects, their locations and after that the app will be able to query the physical affiliates and display their possitions on the map. The following steps will help you with that.

3. In the field What type of class do you need?, choose the Custom option

4. In the field What should we call it?, type “Stores” and then click on Create class button.

5. Then a new class called “Stores” will be shown and you should insert 2 columns on it: a collumn with data type String called Name, as well as another column with data type GeoPoint called Location. Your class should end up like this:

6. Now, fill this class with information. To do so, click on Add a row button in the menu on the top right or in the middle of the page, as shown in the image below.

7. Then fill the row with the informations required: the name of the store and its latitude and longitude. After inserting some data, your Stores class should look like the image below. If you want to insert more data, you can click on the Add a row button on the top, or in the + button bellow the last row of data.

Now you are ready to use the location information of the stores in your app.

Now that we have the stores location stored, let’s code a method to get the objects and display them.

Easy, right? Now, let’s get the CLOSEST one.

You can see how it’s just like getting the closest User as we have done earlier.

You probably noticed we have no way of calling those methods, let’s add the buttons to the home.ts then and make it happen!

At this stage, you can use some features of ParseGeoPoint through Back4App!