This demo illustrates how Google Maps can be used for two separate use cases:
- as a means to display stories attached to specific geographic locations.
- as a location picker to select a place on the map as part of a data gathering process.
You will need to add a MongoDB connection string to your environment so that stories can be saved there. For example, add something similar to the following to your .env file.
DATABASE_URL=mongodb+srv://user:pass@cluster0.abc123.mongodb.net/database
This project uses Mongoose to communicate with the database. This differs somewhat from other examples in our course (elsewhere, we used Prisma instead). The reason we're using Mongoose here is that it supports geospatial indexes, which can improve performance for location-based queries. For example, in /models/StoryModel.js we define a 2dsphere index to speed up location searches. We can then efficiently leverage the MongoDB $near operator in server.js in order to find nearby stories.
Normally you would keep your API hidden in the backend. However in this project (and don't be alarmed...) the Google Maps API Key is public 😮 in index.html. This usage is intentional, and assumes that we have backend restrictions in place for the key. Indeed, the key included here has been restricted via the Cloud Console so as to only work on localhost:3000 and on *.vercel.app/*. Thus feel free to use it for your student project on these development URLs. Beyond this there are many benefits to getting your own key. If you'd like to get your own key, keep reading!
If you're a Sheridan Student, check out the Google Developer Group. This is a great avenue to gain access to further support, community, and Google Cloud credits.