How to Build an Interactive Google Maps Store Locator with JavaScript, Node.js, and MongoDB

Introduction

This comprehensive blog post will walk you through the process of creating an interactive store locator using Google Maps, JavaScript, Node.js, and MongoDB. Whether you’re a developer looking to enhance your skills or a business owner seeking to provide a seamless location-based service, this step-by-step guide will help you build an efficient and customization store locator from scratch.

Section: 1: Setting Up the Development Environment

👉 First, before starting the project make sure we need to install Node. js and MongoDB in your local machine. (Navigate to the installation link Node.js and MongoDB installation).

👉 How to set up Node.js Server and set up the necessary dependencies:

Once we installation is done, now next step is to set up Node.js Server. Now Navigate to the location where you usually keep the code. Then create a new folder called Google-maps-app-api, in that folder create a file called app.js. Now we’re ready to run npm init -y on our terminal. This will create a package.json and package-lock.json file within this folder. Now we need to install all dependencies, run on your terminal: npm install axios body-parser dotenv express mongoose nodemon that all are required for this project. After successful installation, it looks like the following code snippet:

package.json file with all necessary dependencies

After that, the next step is to run the command nodemon app.js on your terminal. Once nodemon is running, it allows to access the pages in the browser server running on http://localhost:3000 and also tests the server connection by POSTMAN. (Navigate to Postman’s download page and download the app.

app. router

Section:2: Integrating Google Maps API

👉 Obtain your own API key from Google Cloud Console:

The following documentation guide how to set up your Google Cloud project before using the Google Maps Platform APIs. (Navigate to Set up your Google Cloud project and get your own key. The next documentation guide is how to create, restrict, and use your API key for the Google Maps Platform. (Navigate to Create API keys and add the API key to your request.

<script async
src = "https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap">
</script>

👉Implement the Google Maps JavaScript API and integrate it into your project:

The following guide shows you how to load the Maps JavaScript API and use it in the project. (Navigate to Maps Javascript API and load the maps JavaScript API into your project.

Maps JavaScript API

👉 Showcase how to display a map with markers representing store locations:

The following documentation shows how to implement markers that allow all stores from API (Navigate to Google Maps with a marker ) and sets the viewport to contain the given bounds (Navigate to Maps).

Section 4: Creating the MongoDB Database

👉 How to set up MongoDB Atlas and configure MongoDB with Node.js API:

First, we need to create a MongoDB Database in MongoDB Atlas, and the following document guide you on how to create your atlas cluster, connect to it, and load sample data. (Navigate to MongoDB Atlas and Get Started with Atlas).

👉 Connect to MongoDB Database with Mongoose:

Mongoose is an npm package that allows you to connect to MongoDB atlas. Then, we will need to install it into the project which we already did in section 1. After that, we need to connect to MongoDB with the mongoose.connect() method. (Navigate to Mongoose connections).

mongoose.connect('mongodb://username:password@host:port/database?options...');

This connection string is also called a Mongo URI. We need to save it in a .env file under a variable called MONGO_URI. Now that we have a Mongo URI, that allows Mongoose to connect to it using Mongoose connect method. The second argument contains optional properties that get rid of deprecation warnings.

mongoose.connect(process.env.MONGO_URI,{
    useNewUrlParser: true,  
    useUnifiedTopology: true,
});

Section 5: Populating the Database with Store Locations.

👉 How to retrieve store data for our APP:

In this project we used the Starbucks store location, navigate to the store-locator Link and then enter your preferred zip code at the same time open the inspect element and then go to the Network tab and make sure to select the Fetch/XHR now we are able to see the store location as a preview (example: following code snippet).

Store Locator Data

The next step is to go to the Response tab and copy your data and save it into your project. In this project, we save it as a store-data.js file.

👉 Demonstrate how to insert this data into the MongoDB collection using Node.js:

For this step, we need to create mongoose schema (Navigate to How to create Schemas ) for creating a store model in MongoDB. Then we create API End Point to make post requests to save real data in MongoDB Database. We tested it by POSTMAN. (Navigate to Postman’s download page and download the app. After posting store data it looks like the following images:

Data test out by POSTMAN

MongoDB collection

Section 6: Building the Store Locator Functionality

👉 Explain how to implement the search feature that allows users to find nearby stores:

A Nearby Search lets you search for stores within a specified area by typing a zip code. Initiate a Nearby Search with a call getStores() function on click of the search icon. The next step is how to get zip code data from this input and handle the response. Shown as the following code snippet:

get stores() function

👉 Find the coordinates of a zip code using Google Maps Geocoding API

This step will allow us to search for stores based on zip code. First, we need to go to the google cloud platform, make sure that we enable the Geocoding API library, and used Google Maps Geocoder to geocode the user's zip code. (Navigate to Geolocation API ). Then, add the zip_code parameter to /api/stores API endpoints. In that step, we used Axios to fetch the data with the geocoding response.

Get requests with API endpoints

👉 Search for stores around the zip code using MongoDB:

In this step, we used MongoDB GeoQuery to find the stores near that with latitude and longitude coordinates. First, we must mention our schema with an index on location and let MongoDB know we are using a “2dsphere”.

storeSchema.index({ location: '2dsphere' }, { sparse: true });

(Navigate to Mongoose Geospatial Queries article for details). we used the distance of 3218 meters and test out using POSTMAN.

👉 Discuss methods to display relevant store information when users click on markers:

First, we need to create the createMarker() function and add an event listener to open the info window on the click of a marker, have the HTML of the info window by the following code snippet, and make sure we need to call inside intiMap() as:

infoWindow = new google.maps.InfoWindow();

Conclusion:

With the power of JavaScript, Node.js, MongoDB, and the Google Maps API at your fingertips, the possibilities are endless for creating impactful and location-based web applications. Happy coding! Thanks for reading….

Full Projects are available at the following Github Link: Google-Maps-Store-Locator