Integrating a Third-Party Map Component
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`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.
Using Third-Party Libraries
This video explains how to use a third-party library
