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