How to add "Google Street View"

[JoseSanchez]

Hello everyone,

Is there a way to add "Google Street View" to Experience Builder ?

Thanks

[JonathanKressin]

This can be done with the developer version, but I don't believe there is a way to do it in AGO.  With the developer version, you can add the google maps library to the project, and then add the functionality to a custom widget.  In our new version of 'Interactive Mapping', based on Experience Builder Developer, I created a widget that did that.  You can see it in action here:

https://apps.kenoshacounty.org/InteractiveMappingBeta/

The streetview tool is all the way to the right on the toolbar, so you may need to click on the right arrows to get to that specific tool.

Jonathan

[JoseSanchez]

Hi @JonathanKressin 

Very good EB application, I see that you customized several widgets, like the MapList widget.

I tested the StreetView and it works fine. Is this widget going to be added to the Developers EB version? 

I found and I am testing an  Arcade code that can be added to a point layer, and it works too:

How to link to Google Street View images from points in ArcGIS Online | Center for Geographic Analys...

[CatherineHall678]

Just used your arcade code and works great too! now I just need to embed it instead of opening a new window. Thank you for sharing!!

[DavidDas__GISP]

Hi Jonathan,

You did a terrific job designing the Google Street View Custom Widget for the Experience Builder.

It works flawlessly in your beta application.

This is exactly what I am looking for.

Could you please tell me what version of EXB Dev you are using?

Could you please tell me what version of Node.js you are using?

Would you be willing to share this Custom Widget with instructions on how to add the Google Maps Library?

David

I

[JonathanKressin]

David,

Thank you for your complements.  Unfortunately, posting here has brought to light that Google prohibits doing this.  We are sadly going to have to pull that tool from the app.  

Just for details from an academic point of view on how this was created, it is currently running in EB 1.11.  I have node.js 14.18.1 on my machine.  The react.js library I am using to pull in the StreetView is @react-google-maps/api.  You do need a cloud subscription to use the API, and there is a small cost per usage.  However, Google Maps provides a $200/month credit which we have had yet to get anywhere near.

[DavidDas__GISP]

Hi Jonathan,

Thanks so much for your prompt and comprehensive response.

 I am using very much the same EXB Dev environment as yours – EXB Dev 1.11 with Node.js version 14.21.3 (Fermium).

I share your disappointment from learning about the Google restrictions in this thread.

However, I appreciate you giving me the tips from an academic standpoint. I learned something valuable today.

Best,

David

[CatherineHall678]

Awesome site! Clean and intuitive!

[BernSzukalski]

A word of caution - you should double-check the Google StreetView/API terms of use. It's been a long while since I looked at this, but as I recall the TOU specifically restricted StreetView to use/launch from Google Maps, not other maps. On top of that, I recall attribution requirements as well.

Perhaps others here have more recent experience.

[JonathanKressin]

Darn, we were ok without the attribution as that was specific to the static APIs, but you are 100% correct on the restriction from mixing it with ESRI maps.  The clause: 

(e) No Use With Non-Google Maps. To avoid quality issues and/or brand confusion, Customer will not use the Google Maps Core Services with or near a non-Google Map in a Customer Application. For example, Customer will not (i) display or use Places content on a non-Google map, (ii) display Street View imagery and non-Google maps on the same screen, or (iii) link a Google Map to non-Google Maps content or a non-Google map.

Specifically forbids the use of what I am doing.  I guess it is better we found out about it now before this version of our app goes into production and it causes a problem.

Thanks!