Jump to content

Trouble with Google Maps API (Autocomplete search function)

Recommended Posts

My website is either https://orchid-violin-yewy.squarespace.com or blackthumb.ink (it's still propagating at the time of posting).

I have google Console and and an API key, I'm new to it and just wanted to start my project by using the standard code from google found at this link: https://console.cloud.google.com/google/maps-apis/discover/autocomplete?authuser=0&project=static-cirrus-424220-h1&rapt=AEjHL4NQN-rsaK2BUrfC4sLCBKCRuxQyd_oxQ2Q7F_2aqJgjCN1qT-FEbV7sDRr2nFSr1AG1lVOzcv5Buk43Dg_wLZIHZJ48Si3RKWksTkXYJjraK0LwBwU

This code works on a HTML previewer like https://tiiny.host/html-viewer/ (if you add an API key of course) and it is functional for me.

In Squarespace however I can get it to appear correctly in in "preview in safe mode" (but it is NOT functional, ie you can't type an address and have it auto fill, it just shows a hand/hover icon). On the actual public facing website is the error "Oops! Something went wrong." Incidentally this is the same error that you get if you put in the wrong API key or leave it blank.

I only have a basic understanding of coding and was having some success de-bugging with chat GPT (don't laugh too hard) but I need a human's help on this one I think!

Here is my ultimate goal:

To quote a customer based on the distance I need to ravel and have them book a time and place (through google or Squarespace bookings)

1. To have a client type in their address and have it autocomplete (I don't "really" need a map) text is fine. Let's call this CUSTHOME

2. Take CUSTHOME  and calculate the miles from my home base (office) lets call it NOTARYHOME

3. Multiply the distance from CUSTHOME and NOTARYHOME if the distance is greater than 2.2 miles charge $45.00 plus $0.75 Per mile. If the distance is less that 2.2 miles display text "this one is on us neighbor".

4. Customers accepts quote, clicks BOOK and CUSTHOME is automatically added to their booking, they chose a time and send it to me to confirm.

5. Customer and I get an email with their quote, address and requested time.

My immediate problem: I can't even get this API to display on my website, public facing:

https://console.cloud.google.com/google/maps-apis/discover/autocomplete?authuser=0&project=static-cirrus-424220-h1&rapt=AEjHL4NQN-rsaK2BUrfC4sLCBKCRuxQyd_oxQ2Q7F_2aqJgjCN1qT-FEbV7sDRr2nFSr1AG1lVOzcv5Buk43Dg_wLZIHZJ48Si3RKWksTkXYJjraK0LwBwU

I would love for someone to give me the code to paste and it would just work (wouldn't we all?).

I have the following code injected in the header, which makes no difference (if I have the code, or delete it all and SAVE.)

<!-- Injected Code in Squarespace Header -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script type="module" src="https://unpkg.com/@googlemaps/extended-component-library@0.6"></script>
<script>
  async function initMap() {
    await customElements.whenDefined('gmp-map');

    const map = document.querySelector("gmp-map");
    const marker = document.getElementById("marker");
    const strictBoundsInputElement = document.getElementById("use-strict-bounds");
    const placePicker = document.getElementById("place-picker");
    const infowindowContent = document.getElementById("infowindow-content");
    const infowindow = new google.maps.InfoWindow();

    map.innerMap.setOptions({ mapTypeControl: false });
    infowindow.setContent(infowindowContent);

    placePicker.addEventListener('gmpx-placechange', () => {
      const place = placePicker.value;

      if (!place.location) {
        window.alert("No details available for input: '" + place.name + "'");
        infowindow.close();
        marker.position = null;
        return;
      }

      if (place.viewport) {
        map.innerMap.fitBounds(place.viewport);
      } else {
        map.center = place.location;
        map.zoom = 17;
      }

      marker.position = place.location;
      infowindowContent.children["place-name"].textContent = place.displayName;
      infowindowContent.children["place-address"].textContent = place.formattedAddress;
      infowindow.open(map.innerMap, marker);
    });

    function setupClickListener(id, type) {
      const radioButton = document.getElementById(id);
      radioButton.addEventListener("click", () => {
        placePicker.type = type;
      });
    }

    setupClickListener("changetype-all", "");
    setupClickListener("changetype-address", "address");
    setupClickListener("changetype-establishment", "establishment");
    setupClickListener("changetype-geocode", "geocode");
    setupClickListener("changetype-cities", "(cities)");
    setupClickListener("changetype-regions", "(regions)");

    strictBoundsInputElement.addEventListener("change", () => {
      placePicker.strictBounds = strictBoundsInputElement.checked;
    });
  }

  document.addEventListener('DOMContentLoaded', initMap);
</script>
<style>
  /* Your CSS styles */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  gmp-map:not(:defined) {
    display: none;
  }

  #title {
    color: #fff;
    background-color: #4d90fe;
    font-size: 25px;
    font-weight: 500;
    padding: 6px 12px;
  }

  #infowindow-content {
    display: none;
  }

  .pac-card {
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
    margin: 10px;
    font: 400 18px Roboto, Arial, sans-serif;
    overflow: hidden;
  }

  .pac-controls {
    display: inline-block;
    padding: 5px 11px;
  }

  .pac-controls label {
    font-size: 13px;
    font-weight: 300;
  }

  #place-picker {
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 1rem 1rem;
  }
</style>

 

I was able to get a public facing version to appear using the following code but the functionally was awful. For example you had to hold the right mouse button down to be able to type in the white address box!!

<!DOCTYPE html>
<html>
<head>
  <title>Google Maps with Place Autocomplete</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script type="module" src="https://unpkg.com/@googlemaps/extended-component-library@0.6"></script>
  <style>
    /* Your CSS styles */
    #map {
      height: 400px; /* Adjust the height as needed */
      width: 100%; /* Adjust the width as needed */
    }
  </style>
</head>
<body>
  <gmpx-api-loader
    key="YOUR_API_KEY_HERE"
    solution-channel="GMP_CCS_autocomplete_v3">
  </gmpx-api-loader>
  <gmp-map id="map" center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
    <gmpx-place-picker for-map="map"></gmpx-place-picker>
  </gmp-map>
</body>
</html>

 

 

 

oops.png

SS wont load.png

tiny preview works fine.png

square space editor preview.png

Link to comment
  • Replies 0
  • Views 278
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.