'Google Sheets and Google Forms not working with Google Maps API

I am a beginner programmer.

I am trying to make a website that does the following:

  • Displays a map using Google Maps API
  • Displays a form with checkboxes that links to a Google Form
  • Submitted options get saved to Google Sheets via Google Forms
  • Puts a marker on the map with the information from Google Sheets.

So far:

  • I have the map displayed.
  • I have a button that works with Geocoding to correctly identify where I am.
  • I've added the APIs for Google Sheets, Geocoding and Places to my Maps API credentials
  • I have the checkboxes displayed (its ugly and I can't get anything to line up but they're there).
  • I've used the element name for each checkbox so that its the same as the relevant element name on the Google Form.
  • I've published the Google Sheet and made it so anyone can edit. The Form correctly saves data to the Sheet.
  • I've linked the Google Sheet to the code using it's ID.

The checkboxes on the website currently do nothing. They aren't sending the data to Google Forms, so Google Forms isn't sending the data to Google Sheets. That's before I figure out how to save current location. It currently isn't saving anything at all.

I'm using Replit to host the code.

What have I forgotten to do?

Here's the code to link the Sheet to the site:

// ID of the Google Spreadsheet. .
const spreadsheetID = "1TZ07SbVD6_ZW27MK9Y0ph5PtpDdk7AKbi-SLmf6jTT4";

// A link to a Google Sheets JSON access point
// Set to public or set to Anyone with link can view.
const DATA_SERVICE_URL = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/default/public/values?alt=json";
let info;
let map;

Here's the code that links the Form to the site:

 <!--Send data to Google Spreadsheet via forms-->
        <form id="1Y1vz3oqTnUSx-iIJgNB7vqlZblSYzUZ8nbjEetkd85E" method="post"
          action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSceMh-CMUgv1eNZO88y3cT-P_WOfSgQUG-D0cTtl2rIyO4FiQ/formResponse"
          target="hidden_iframe" onsubmit="submitted=true;">

Here's the code for the checkboxes:

<!--generate tickboxes and choices-->
          <form action="/action_page.php">
            <input type="checkbox" id="lotsOfSpace" name="entry.902865007" value="space">
            <label for="lotsOfSpace"> Lots of space to park</label> <br>

            <input type="checkbox" id="toilets" name="entry.222271093" value="toilets">
            <label for="toilets"> Toilets</label><br>

            <input type="checkbox" id="foodAndDrink" name="entry.396577945" value="food">
            <label for="foodAndDrink"> Food and Drink</label><br>

            <input type="checkbox" id="bins" name="entry.1252658347" value="bins">
            <label for="bins"> Bins</label><br>

            <input type="checkbox" id="mobileSignal" name="entry.1806124153" value="mobileSignal">
            <label for="mobileSignal"> Good mobile signal</label><br>

            <input type="checkbox" id="showers" name="entry.395835740" value="showers">
            <label for="showers"> Showers</label><br><br>

            <div class="rateMyLayby">
              <label for="location" aria-describedby="location_desc">Location<span> *</span></label>
              <button id="locationButton" class="btn"></button>

              <input id="location" name="entry.685751944" type="hidden">
            </div>
            <div class="rateMyLayby">
              <input id="latitude" name="entry.1618013049" type="hidden">
            </div>
            <div class="rateMyLayby">
              <input id="longitude" name="entry.1636261106" type="hidden">
            </div>
            <input type="submit" value="Submit">

          </form>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source