Import and Export locations on Google Maps — Part 3

Hello readers!

Previously I wrote about adding a click function on Google Maps and displaying markers.

Today I want to add another feature in the app by allowing import and export locations.

Create Import and Export Buttons

I added import and export location buttons to the bottom of the web page like this

{/* displays export and import options */}
  <div className="list-footer">
    <AppButton handleClick={exportLocations}>
      Export Locations
    </AppButton>
    <input
      className="app-button"
      type="file"
      accept=".json"
      onChange={importLocations}
    />
  </div>

Import Locations Logic

This function imports a location list from a JSON file, parses the data, and appends it to the existing list of locations. It utilizes a FileReader to read the file contents and updates the state accordingly.

// Function to import location list from JSON
  const importLocations = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
      const importedData = JSON.parse(e.target.result);
      setListOfLocations([...listOfLocations, ...importedData]);
    }…