This element requires a valid Google Maps API Key with the Geocoding API enabled. You must configure this in the Integrations section under the plugin settings.
The Dynamic Google Maps Directions element for Bricks enables users to render customized Google Maps routes between two points, either specified via address or geographic coordinates. This element helps provide visual navigation directions within a Bricks-powered layout and supports settings, including geolocation, travel modes, and custom markers.
Settings
The element offers a comprehensive control panel grouped into several sections:
General Map Settings
Height: Adjustable via slider (100px–3000px), defines map height.
Map Data Type: Choose between
AddressorCoordinatesas the input method.Departure & Destination: Input fields adapt based on the selected data type (text inputs for addresses or latitude/longitude).
Travel Preferences
Travel Mode: Supports
Driving,Walking,Bicycling,Transit, andTwo Wheeler.Zoom Level: Set the initial zoom (1–22).
Map Type: Choose between
Roadmap,Satellite,Hybrid, andTerrain.
Geolocation
Enable Geolocation: When enabled, users can use their current position as either the departure or destination.
Geolocation Button Text: Customize the label of the selection button.
Marker Configuration
Custom Markers: Custom markers can be displayed for departure and destination.
Marker controls include:
Title and Label
Image Upload
Size (20px–100px)
InfoWindow
Enable Custom InfoWindow: Optionally add rich text descriptions to each marker's popup bubble.
Separate content fields are available for Departure and Destination.
Map Interaction Controls
These toggle controls let you enable or disable specific Google Maps UI features:
Scroll Wheel Zoom
Map Type Control
Pan Control
Rotate Control
Scale Control
Street View
Zoom Control
Full Screen Toggle
Style
The map container inherits full-width and uses a height setting defined by the user. Additional customization is typically handled via Bricks’ layout tools or custom CSS.
Usage Summary
Enable the Google Maps API Key in the plugin’s Integration tab.
Drag the Dynamic Google Maps Directions element into your Bricks layout.
Configure departure and destination using either addresses or coordinates.
(Optional) Activate geolocation for user-driven directions.
Adjust map style, controls, and markers as desired.
Save and preview on frontend for a live map with direction rendering.