How to show gmaps object (from Google Maps api) on streamlit

[AelxRossi]

Hi everyone,

I am trying to display the map given by Google Maps API using python gmaps library on streamlit. I know that there are other ways to plot maps like folium or with st.map but I would like to use directly the google maps one. Notebook example:

The map object is of type gmaps.figure.Figure so it’s not a standard one. Does anyone have any idea on how to display it?

[randyzwitch]

Hi @AelxRossi, welcome to the Streamlit community!

From a quick reading of the gmaps source code, it looks like they might be doing this via a ipywidgets display. If so, that’s not currently able to be embedded within Streamlit.

Best,
Randy

[AelxRossi]

Hey @randyzwitch thanks for your reply

In this discussion about pywidgets I found this solution that seems to do the job.
ipywidgets streamlit discussion

from ipywidgets import embed
snippet = embed.embed_snippet(views=map)
html = embed.html_template.format(title="", snippet=snippet)

import streamlit.components.v1 as components
components.html(html, height=500,width=500)

[randyzwitch]

Perfect, thanks for surfacing that!

[Vans_Andriawan]

i come up with this error:

Traceback (most recent call last):
File “C:\Users\vansa\anaconda3\envs\PSAK73\lib\site-packages\streamlit\scriptrunner\script_runner.py”, line 554, in _run_script
exec(code, module.dict)
File “gmaps.py”, line 36, in
snippet = embed.embed_snippet(views=map)
File “C:\Users\vansa\anaconda3\envs\PSAK73\lib\site-packages\ipywidgets\embed.py”, line 264, in embed_snippet
data = embed_data(views, drop_defaults=drop_defaults, state=state)
File “C:\Users\vansa\anaconda3\envs\PSAK73\lib\site-packages\ipywidgets\embed.py”, line 226, in embed_data
view_specs = [w.get_view_spec() for w in views]
File “C:\Users\vansa\anaconda3\envs\PSAK73\lib\site-packages\ipywidgets\embed.py”, line 226, in
view_specs = [w.get_view_spec() for w in views]
AttributeError: type object ‘map’ has no attribute ‘get_view_spec’

[leeca]

You need to assign a name to the map:

def new_york():

    # Plot coordinates
    coordinates = (40.75, -74)
    _map = gmaps.figure(center=coordinates, zoom_level=12)

    # Render map in Streamlit
    snippet = embed.embed_snippet(views=_map)
    html = embed.html_template.format(title="", snippet=snippet)
    return components.html(html, height=500,width=500)

[BSTAX]

hey @leeca would u please provide a complete code for the maps.
So basically im getting an error with the objects embed and components

[nikhiljha97]

were you able to solve this error ?