Fluent Commerce Docs

Docs

Search

Help & Feedback

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

Content in this track:

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

End Of Track

Content in this track: Integrating a Third-Party Map Component

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

This lesson demonstrates how to integrate a third-party component, specifically a Google Maps React component, into your custom map card. We'll cover the installation process using Yarn and discuss best practices for selecting third-party components for use in Fluent Web Apps. We'll also explore the option of using the map in development mode without an API key.

Key points

Third-Party Component Integration: This lesson focuses on incorporating external libraries into your custom components, showcasing the use of a Google Maps React component for map display.
Best Practices: When choosing third-party components, prioritize React-based libraries and those compatible with Material UI to ensure seamless integration with the Fluent framework.
Installation with Yarn: We'll walk through the steps of installing the chosen map component using Yarn.
Development Mode: The lesson also covers using the map component in development mode without providing a Google Maps API key, allowing for testing and development before deploying to production.

In this lesson, you will use a third-party component, in this case, a Google Maps React Component, to display a map on your map card.

When looking for third-party or existing components for use with your Fluent Web Apps, also remember the following two practices:

Prefer React-based
Prefer Material UI

Watch the video below for steps on how to Install a

`GoogleMapReact`

component with Yarn.

Use a different key to the videos

Do not use the same key as shown in the videos - head over to developers.google.com to get your own.

Alternatively, you can use the map in development mode without providing the API key. It will display a message and a watermark. Dismissing the message allows you to still interact with the map.

No alt provided

Using Third-Party Libraries

This video explains how to use a third-party library

Update June 2023:

Since authoring this course, changes to components have resulted in the map being hidden in a zero-height div. To show the map, simply wrap the GoogleMapReact component in a div tag, and set the height to about 300px.

Cameron Johns

Cameron Johns

Contributors:

Knowledge Tracks Related To This Topic

Component SDK

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

Copyright © 2025 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.