Skip to content

Google Maps

A component to embed a Google Map. It can be used to display a map with markers.

Fields

NameTypeDescriptionOptions
API KeyTextAPI Key from Google Cloud Console.
Map IDTextID of map from Google Cloud Console, needed for markers.
Map typeTextOne of 'roadmap', 'satellite', 'hybrid' or 'terrain'.
  • Roadmap
  • Satellite
  • Hybrid
  • Terrain
ZoomNumber
LatitudeNumber
LongitudeNumber
MarkersObjectMarkers data
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

NameDescriptionUsage
gmap-marker-clickCapture single clicks on markers.
gmap-clickCapture single click on map.

Low code usage

This component can be declared directly in Python, using backend-driven UI.

python
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.
python
def handle_event(state, payload, context, ui):
  pass

Reference