Google Maps Retool Integration with a Custom Component

Business Benefits of Google Maps Retool Integration

• Enhanced Location Visualization: Visualize customer locations, delivery routes, or service areas on an interactive map inside Retool.
• Operational Efficiency: Simplify real-time tracking of assets, sales territories, or field teams directly in your internal tool.
• Improved Decision-Making: Provide managers with geographic data insights without switching between tools.
• Customizable for Business Needs: Add location-based filters, clickable markers, or integrate it with CRM data for personalized business solutions.

For my project, I wanted to:

• Display a real-time, zoomable map.
• Dynamically place markers based on data (like addresses or coordinates from my database/API).
• Allow users to interact with the map (click markers, zoom, move map).

Solution: Use Custom Component in Retool with React.js + Google Maps JavaScript API. Let's walk through the process step by step!

Step 1: Set Up Google Maps API Key

Why?

Google Maps requires authentication to use its services securely via an API Key.

Steps to Get Your API Key:

1. Go to Google Cloud Console → https://console.cloud.google.com/.
2. Create or select a project.
3. In the left sidebar, navigate to:
   • APIs & Services → Library.
4. Search and enable:
   • Maps JavaScript API.
   • (Optional) Geocoding API if you want address-to-coordinate lookups.
5. Go to:
   • APIs & Services → Credentials → Create Credentials → API Key.
6. Restrict your API Key:
   • Application Restrictions → Choose HTTP referrers.
   • Add: https://your-subdomain.retool.com/*.
   • API Restrictions → Limit to Maps JavaScript API.

Step 2: Add a Custom Component in Retool

Why?

Retool doesn’t have built-in Google Maps, but Google Maps Retool Integration can be achieved using a Custom Component.

How to Add a Custom Component in Retool?

1. Open your Retool app.
2. Drag Custom Component into the canvas.
3. Resize it → Ensure it's large enough to display the map (minimum 400px height).

Step 3: Embed Google Maps with React

Instead of @react-google-maps/api, we’ll use @vis.gl/react-google-maps — a modern, lightweight, and officially supported Google package with seamless React integration.

Code for Google Maps Retool Integration:

import React from 'react';
import { Retool } from '@tryretool/custom-component-support';
import { APIProvider, Map, Marker } from '@vis.gl/react-google-maps';

const containerStyle = {
  width: '100%',
  height: '400px'
};

const MyMapComponent = ({ latitude, longitude, markerTitle, apiKey }) => {
  const position = {
    lat: latitude || 40.7128,
    lng: longitude || -74.0060
  };

  return (
    <APIProvider apiKey={apiKey}>
      <div style={containerStyle}>
        <Map
          style={{ borderRadius: '20px' }}
          defaultZoom={10}
          defaultCenter={position}
          gestureHandling={'greedy'}
          disableDefaultUI
        >
          <Marker position={position} />
        </Map>
      </div>
    </APIProvider>
  );
};

export default MyMapComponent;

Step 4: Pass Dynamic Data from Retool

Why?

To dynamically control:

• Marker positions.
• Map center location.
• Titles.

How to Pass Dynamic Data?

1. Add a state to receive coordinates data from your Retool app:

const [coordinate, _setCoordinate] = Retool.useStateArray({
    name: 'coordinate'
})

2. In Your Retool app → Custom Component → Component Inspector, pass your list of coordinates.

       3. Loop through coordinates to add markers dynamically:

<Map
  defaultZoom={10}
  defaultCenter={{ lat: 18.46633, lng: -66.10572 }}
  gestureHandling={'greedy'}
  disableDefaultUI
>
  {coordinate?.map((coord, i) => (
    <Marker
      key={i}
      position={coord.position}
    />
  ))}
</Map>

Result:

Step 5: Add Event Listeners (Optional)

Why?

When a user clicks a marker, you may want to trigger an event in Retool.

How to Add Click Event?

const onMarkerClick = Retool.useEventCallback({ name: 'onMarkerClick' });

Then, update the Marker:

<Marker
  key={i}
  position={coord.position}
  onClick={() => {
    onMarkerClick();
  }}
/>;

In Retool:

• Listen for the onMarkerClick event.
• Set an action → Trigger a query, update another component, etc.

Final Result of Google Maps Retool Integration

• ‍Interactive Google Maps inside Retool
• Dynamically control markers & map position
• Capture map events back to Retool
• Reusable and externally hosted custom component setup

Wrap Up: Why Google Maps Retool Integration is a Game-Changer?

The Google Maps Retool Integration using Custom Component in Retool with React.js and Google Maps APIprovides:

• Advanced geolocation visualization for business applications.
• Real-time interactivity with dynamic markers and events.
• Full flexibility to control map behavior dynamically.
• Reusable, externally hosted custom component setup for easy deployment.

By following this guide, you can seamlessly embed Google Maps in Retool and build interactive map-based internal tools for your business.

Try it now and enhance your Retool experience with Google Maps!

Ready to streamline your business with Retool?

At Retoolers, we specialize in helping businesses like yours create powerful dashboard using Retool. Whether you need a custom dashboard, an admin panel, a complete workflow automation solution, or client portal we've got the expertise to bring your ideas to life.

Get in touch with us today to see how we can help you optimize your operations with Retool. Contact Retoolers and let’s get started!