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’.
  1. Roadmap
  2. Satellite
  3. Hybrid
  4. Terrain
ZoomNumber--
LatitudeNumber--
LongitudeNumber--
MarkersObjectMarkers data-
Custom CSS classesTextCSS 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

​
Reference