Google Map

Introduction

The Google Map component allows you to add an interactive map with customizable markers and controls to your form. It enables users to select locations, view map markers, and interact with the map by adding or changing markers. This component is included within the following NPM package: @react-form-builder/components-google-map.

The following sections describe the configuration and customization options available for the Google Map component. Customize it to suit your specific needs by setting the various properties listed below.

Also see the guide on how to use Google Maps to autocomplete an address.

Main properties

The following general properties are available within the Main tab:

Name	Type	Description
Latitude	number	Sets the latitude of the map's center point
Longitude	number	Sets the longitude of the map's center point
Zoom	number	Controls the initial zoom level of the map
API Key	string	Google Maps API key required to load the map
Map ID	string	A map ID is an identifier that's associated with a specific map style or feature, more info
Language	string	Specifies a language for map localization, more info
Region	string	Sets a specific map region, more info
Color Scheme	choice	Sets the map's color theme (DARK, LIGHT, FOLLOW_SYSTEM)
Map Type	choice	Specifies the default map type (roadmap, satellite, terrain, hybrid)
Gesture Handling	choice	Defines how users can interact with the map via gestures (none, auto, cooperative, greedy)
Show Map Control	boolean	Displays map control options when enabled
Search placeholder	string	Placeholder text for the map search input
Map Control Position	choice	Specifies the position of the map control (e.g., top right, bottom left)
Add Marker on Search	boolean	If enabled, adds a marker when a search is performed
Allow Multiple Markers	boolean	Enables multiple markers to be placed on the map. Default is false
Allow Changing Markers	boolean	If enabled, allows users to add, move, or delete markers
Collision Behavior	choice	Manages how markers behave when they overlap
Markers	json	Marker data
Marker window title	string	Title for the marker window
Remove marker caption	string	The caption on the marker removal button

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your calendar as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

• For Device: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.

• Component > Class Name: Add a class name for your component for the subsequent styling if necessary.

• Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

  Name	Type	Description
  Width	number	Specifies the width for your component
  Height	number	Specifies the height for your component
  Margin top/right/bottom/left	number	Margin values for you component
  Color	string	Allows customizing the text color
  Background color	string	Enables customizing the background color