Incorporating Google Street View with Dash App

Dash Python
1

Hello,

I have a dash app and would like to be able to add Google Street View (Street View Side-By-Side  |  Maps JavaScript API  |  Google Developers) to it, but the code that Google provides is in JavaScript. How can I incorporate this into my app written in Python?

Thank you,

2

Hi @riskfree

Dash has a function to use js in the code:
https://dash.plotly.com/clientside-callbacks

3

Thanks @Eduardo , would you happen to know how I can achieve the output like this in Dash? https://jsfiddle.net/api/post/library/pure/.

I’m trying to create an app that would enable the user would click on a point in a Dash Mapbox to retrieve the latlon from clickData and that will feed into the latlon for the Streetview.

This is what I have tried but it’s telling me ‘google is not defined.’

app.layout = html.Div(
    [
        dcc.Input(id="lat"),
        dcc.Input(id="lon"),
        html.Div(id="g-map"),
        html.Script(
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&libraries=&v=weekly&channel=2"
        ),
    ]
)

app.clientside_callback(
    """
    function initialize() {
        const fenway = { lat: 42.345573, lng: -71.098326 };
        const map = new google.maps.Map(document.getElementById("map"), {
            center: fenway,
            zoom: 14,
        });
        const panorama = new google.maps.StreetViewPanorama(
            document.getElementById("pano"),
            {
            position: fenway,
            pov: {
                heading: 34,
                pitch: 10,
            },
            }
        );
        map.setStreetView(panorama);
}
    """,
    Output("g-map", "children"),
    Input("lat", "value"),
    Input("lon", "value"),
)

Any help would be much appreciated.

4

Hi @riskfree

Could you share the callback function?

5

Hey @Eduardo isn’t the code I posted above the callback function? What am I missing?

6

Oh, sorry :woozy_face:

You are right, I forgot that in the client side callback tue Output and input are at the end.

I think the error is related with this line:


const map = new google.maps.Map(

Did you import the library? :thinking:

7

I figured the error is related to importing a google library but how I can import it since we are running a Python script? Wouldn’t there need to be a library written in Python to work where I can pip install? This is the documentation Google provides (Street View Service  |  Maps JavaScript API  |  Google Developers) but there isn’t any mention of using the API in Python :cry:

8

Hey @AnnMarieW ,

Do you know how to deal with this. :thinking:

Thanks. :smiley:

9

Hmm, I’m not sure if this can be done with a clientside callback.

It might be better to make a custom component by wrapping a React component such as react-google-streetview - npm

10

@AnnMarieW thank you. Would you be able to guide me through how I can go about creating a custom component?

11

@riskfree you can see the documentation here,

https://dash.plotly.com/plugins