Incorporating Google Street View with Dash App


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,

Hi @riskfree

Dash has a function to use js in the code:

Thanks @Eduardo , would you happen to know how I can achieve the output like this in Dash?

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(

    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(
            position: fenway,
            pov: {
                heading: 34,
                pitch: 10,
    Output("g-map", "children"),
    Input("lat", "value"),
    Input("lon", "value"),

Any help would be much appreciated.

Hi @riskfree

Could you share the callback function?

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

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:

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:

Hey @AnnMarieW ,

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

Thanks. :smiley:

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


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

@riskfree you can see the documentation here,

1 Like