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

Using Streamlit
1

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:

image
image704×496 138 KB

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?

2

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

1 Like
3

Hey @randyzwitch thanks for your reply :slight_smile:

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)
1 Like
4

Perfect, thanks for surfacing that!

1 Like
5

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’

6

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)
7

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

8

were you able to solve this error ?

1 Like
9

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.