Track Your Friends On Google Maps With Angular

Touhid Rahman
JavaScript in Plain English
5 min readJan 31, 2022

--

Display your friends’ geolocation on a Google map using Google’s JavaScript map SDK without any third-party wrapper library.

The Angular community provides several Google map and open street map wrappers, including one from Angular’s in-house team. However, in this article, I will demonstrate how to use the original library that is provided by Google, the Maps Javascript API. So, let’s get started!

Fake Backend

To get the geolocations of friends, we are going to utilize a fake backend built using Express. Of course, you can switch the backend with your real data at any time, given that you have a proper source for geolocations.

Backend: Step 1

Initialize an Express server project. You can simply start with npm init -y , which will create the Node project. Next, install the required dependencies:

npm i express @ngneat/falso cors

Modify the scripts section ofpackage.json . This command will start our server.

"scripts": {
"start": "node server.js"
}

Backend: Step 2

Now create an empty server.js file in the project root and write logic to make fake data:

Since we are not using any database for simplicity’s sake, our backend generates some friend objects and writes them in a JSON file. Afterward, an interval function iterates over those friend objects and changes the location property slightly every 5 seconds to simulate the friends’ movement on the map. The backend has also very simple search and pagination capability.

To test the API, start the server using npm start and send a request to http://localhost:3000/friends using browser or postman client. If you receive a response such as following then everything worked out!

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Content-Type: application/json; charset=utf-8
Content-Length: 2192…

--

--