Repository navigation
Working with Google Maps JavaScript API
Yumble makes use of the Google Maps JavaScript API for location queries and npm packages that allow us to write code in React components rather than in script tags in HTML.
The API key should be located in deprecatedindex.html as a script tag:
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places></script>
As of 11th April 2021 the Google Maps API key is extracted out from index.html and now the application will query the server for it. This removes a security threat by hiding the API key from the public.
A quick and easy YouTube tutorial to acquire an API key can be found here
Once the API key has been acquired, you will want to go into your Google Cloud Platform console -> Library and add the following APIs:
- Places API
- Maps JavaScript API
- Geocoding API
To allow your API key to only be used for these APIs you must go into your Google Cloud Platform Console -> Credentials then you can restrict your key with the options found under API restrictions.
- Yumble will not be able to do perform any location searching without having a readily available API Key and the APIs mentioned earlier enabled
- Official documentation on the API library can be found here
- As mentioned in the video, you will want to keep your API call testing to a minimum as you approach a certain threshold you will be charged (use Postman to directly call the API)
- To run the application locally you must have an environment variable file called ".env" in the root of the backend folder with the following inside:
GOOGLE_API_KEY=YOUR_API_KEY_HERE