Custom component deprecated

I have a custom component that displays a Google map with multiple locations based on a table. Around 2 hours ago the entire map disappeared and the component is blank.

I just noticed for the first time the component is deprecated. I am hoping this is not why the component just stopped working.

chrome_jDt3N79IXA

Does anyone know if custom components no longer function? It seems strange they would just stop working without notice.

I just simplified and tested outside of Retool and the map works. The exact same code does not work in Retool. It would seem there is an issue with this Retool custom component.

This is becoming urgent as the client depends on this map. Is anyone from Retool able to help?

Below is the simple code I put in an html file that worked and the same code inside the custom component.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map with One Marker</title>
    <style>
      #map {
        height: 450px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      async function initMap() {
        try {
          console.log("Initializing map...");
          // Request needed libraries.
          const { Map } = await google.maps.importLibrary("maps");
          console.log("Maps library loaded successfully.");

          const map = new Map(document.getElementById("map"), {
            center: { lat: 49.2655772, lng: -123.1315396 },
            zoom: 10,
          });
          console.log("Map initialized successfully.");

          // Create a simple marker (reverting back from AdvancedMarkerElement)
          new google.maps.Marker({
            position: { lat: 49.2655772, lng: -123.1315396 },
            map: map,
          });

          console.log("Marker added successfully.");
        } catch (error) {
          console.error("Error initializing map: ", error);
        }
      }

      function handleScriptLoadError() {
        console.error(
          "Failed to load Google Maps API script. Please check your API key and network connection."
        );
      }
    </script>

    <script>
      try {
        const mapScript = document.createElement("script");
        mapScript.src = `https://maps.googleapis.com/maps/api/js?key=myapikey&callback=initMap&v=weekly`;
        mapScript.async = true;
        mapScript.defer = true;
        mapScript.onerror = handleScriptLoadError;
        document.head.appendChild(mapScript);
        console.log("Google Maps API script added successfully.");
      } catch (error) {
        console.error("Error adding Google Maps API script: ", error);
      }
    </script>
  </body>
</html>

Hey @Shawn_Optipath! Thanks for reaching out.

While it's true that the previous generation of the custom component is being deprecated in favor of Custom Component Libraries, those components should definitely still continue to function as expected. I did some brief testing - literally just copying and pasting the entire HTML document you've shared here - and don't see any issues:

Do you see any errors in the browser console? It may also be useful to send over your app JSON with hard-coded query data, if you're still unable to figure out what's going on.

Hey @Darren,
Wow, that's good news. Now to find out what's happening on my end. Did you use your own Google api key? It could be that.

Yes! I used my own Maps API key. The browser console should show you a pretty clear error if that's what is happening here.

I just DMed you my API key for Google in question. I can change it after.
Hopefully you get an error with it. :smiley:

Works like a charm, sorry to say. :thinking:

Strange indeed. It just stopped working around 4pm yesterday.

Here's a screenshot. Did you have anything in the Model area of the custom component?

A couple issues upon inspection in the console. Not sure if your retool environment is different than mine and somethin is blocking the map.

No, I left the Model input blank but even tried to throw an intentional syntax error in there, without any luck. It is, however, necessary to have the Storage and cookies configuration option toggled on in order for the markers to work, but the map still seems to load.

Can you try toggling on that one, at least?

1 Like

That was it! Everything is back to normal. Wow.

Is that something new? Just wondering because I do not remember that being a feature or using it.

1 Like

It's been there for as long as I can remember! Not sure why it would have become toggled off, either. Regardless, I'm glad you're back in business. :+1:

1 Like

Thanks for helping out @Darren. Really appreciate it.

1 Like

@Darren,
I'm glad you helped find a solution and that is the main thing. I am still perplexed why it worked in previous versions without checking the storage and cookies option. Is there a way to find out if any minor updates in Retool would have caused this? It would be nice to be able to follow this sort of change.
I'm going to look into the Google maps API side a well. Something definitely changed.

Understandable! I can think of a few different possibilities and will do my due diligence on this end, as well. It's possible that:

  • Google started requiring storage access when it didn't previously
  • Retool reset those configuration options when updating the component, causing that particular option to become unchecked

I'll let you know if I find anything!

Ok, appreciated.