Embed
Google Maps
Embed
Google Maps
A component to embed a Google Map. It can be used to display a map with markers.
Fields
| Name | Type | Description | Options |
|---|---|---|---|
| API Key | Text | API Key from Google Cloud Console. | |
| Map ID | Text | ID of map from Google Cloud Console, needed for markers. | |
| Map type | Text | One of ‘roadmap’, ‘satellite’, ‘hybrid’ or ‘terrain’. |
|
| Zoom | Number | ||
| Latitude | Number | ||
| Longitude | Number | ||
| Markers | Object | Markers data | |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. |
Events
Low code usage
This component can be declared directly in Python, using backend-driven UI.
ui.GoogleMaps(content={
"apiKey": "", # str
"mapId": "", # str
"mapType": "roadmap", # str [roadmap, satellite, hybrid, terrain]
"zoom": 0.0, # Union[float, str]
"lat": 0.0, # Union[float, str]
"lng": 0.0, # Union[float, str]
"markers": {}, # Union[Dict, str]
"cssClasses": "", # str
},
handlers={
"gmap-marker-click": handle_event,
"gmap-click": handle_event,
}
)
A function, in this example handle_event, should be implemented in your code to handle events.
def handle_event(state, payload, context, ui):
pass