Pinpointing Wildlife: Integrating Google Maps API in TerraQuest

So, as many of you know, I have been working on TerraQuest, a Capstone Project of mine, which is a platform for wildlife enthusiasts built on the MERN stack. One of the core features of TerraQuest is to be able to submit sightings of wildlife. For doing so, the user must be able to provide data such as time, date, location and species for submitting an observation. Things, such as time, date and species, is straightforward enough as we just use simple form elements, although location is a bit tricky. How does the user find a location? One ideas was to allow the user to just enter something like coordinates or hexcode. But by allowing users to do so can lead to human errors while typing in the coordinates or hexcode location. So, eventually, I realised the best thing to do was to allow the user to drop a pin on the exact location on the map. Now the problem was for me to integrate a map in my application, and here are some Maps API providers that I researched:

1. Google Cloud Maps API

2. MapBox API

3. Azure Maps

4. OpenLayers

5. Leaflet

6. Looker

Finally, after analysing them, I decided to use the Google Maps API provided by Google Cloud. I decided that this was the best option for my project, as I already had experience using Google Cloud API services, and I had already implemented 3rd party user authentication using the Google Auth service from Google Cloud. Google Maps also had npm dependencies very conveniently available, making it very straightforward for me to integrate it into my React.js project. Google Maps was also a convenient option as it was a scalable, clean, and well-supported well (in terms of documentation, community and updates). Google also had the autocomplete feature, which would allow me to search for places on my application, which could be helpful for users to find places.

How I implemented it:

1. Install Required Dependencies

Start by installing the Google Maps wrapper for React:

npm install @react-google-maps/api

Also, ensure axios is installed for form submission:

npm install axios

---

2. Get Your Google Maps API Key

Go to Google Cloud Console, enable:

• Maps JavaScript API

• Places API

Then, generate your API key. Make sure to restrict it appropriately.

Add it to your .env file:

VITE_GOOGLE_MAPS_API_KEY=your_google_maps_api_key

---

3. Configure the Map Component

Import necessary components:

import {
  GoogleMap,
  Marker,
  useJsApiLoader,
  Autocomplete,
} from "@react-google-maps/api";

Initialise libraries and map centre:

const libraries = ["places"];
const defaultCenter = { lat: 12.9234996, lng: 77.4959894 }; // You can set this to a place you like

Load the API:

const { isLoaded, loadError } = useJsApiLoader({
  googleMapsApiKey: apiKey,
  libraries,
});

---

4. Set Up the Autocomplete and Map

Use Autocomplete For location search:

<Autocomplete onLoad={onLoadAutocomplete} onPlaceChanged={onPlaceChanged}>
  <input type="text" placeholder="Search for a location" />
</Autocomplete>

Render the map with a marker:

<GoogleMap
  mapContainerStyle={{ width: "100%", height: "400px" }}
  center={mapCenter}
  zoom={12}
  onClick={onMapClick}
>
  {selectedPosition && <Marker position={selectedPosition} />}
</GoogleMap>

---

5. Handle Location Selection

Save the autocomplete instance and update the map center when a place is selected:

const onPlaceChanged = () => {
  const place = autocomplete.getPlace();
  if (place.geometry?.location) {
    const lat = place.geometry.location.lat();
    const lng = place.geometry.location.lng();
    setMapCenter({ lat, lng });
    setSelectedPosition({ lat, lng });
  }
};

Let users select the location manually:

const onMapClick = (event) => {
  const lat = event.latLng.lat();
  const lng = event.latLng.lng();
  setSelectedPosition({ lat, lng });
};

---

6. Done!

Now your app supports:

✅ Location search with autocomplete
✅ Manual marker placement
✅ Easy integration with your form data

Perfect for projects like TerraQuest where users report sightings by selecting map locations.

Bonus:

Here is a video of it functioning: