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]);
    };
    reader.readAsText(file);
  };

Export Locations Logic

This function exports the location list as a JSON file by converting the list of locations to JSON format, creating a Blob with the JSON data, and generating a download link for the user to save the file.
Finally, it initiates the download of the JSON file and removes the dynamically created download link from the document.

// Function to export location list as JSON
  const exportLocations = () => {
    const data = JSON.stringify(listOfLocations);
    const blob = new Blob([data], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "locations.json";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

Demo

You can get the full code from my GitHub.

Thank you for reading! Feel free to connect with me on LinkedIn or GitHub.

Import and Export locations on Google Maps

Create Import and Export Buttons

Import Locations Logic

Export Locations Logic

Demo