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,
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.
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
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?
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
Hey @AnnMarieW ,
Do you know how to deal with this.
Thanks.
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
2 Likes
@AnnMarieW thank you. Would you be able to guide me through how I can go about creating a custom component?
Emil
July 18, 2021, 5:46pm
11
1 Like