nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to add "Google Street View"

JoseSanchez

Hello everyone,

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

Thanks

Find more posts tagged with

ArcGIS Online

Accepted answers

All comments

nicogis

nicogis/streetview_arcgis-experience-builder: Custom ArcGIS Experience Builder widget that captures map clicks and opens Google Street View — inline embed (Google Maps Embed API) or new browser tab. Supports multi-language UI (EN, IT, ZH, FR, DE, ES) and configurable map-centering on click.

bsanders69

I don't read anything that would disallow using a coordinate from a mouse click that opens Google Maps/StreetView in a Browser tab (not within a window in Pro or an Experience. Is there such terminology from Google on an approach such as this?

hoogw

Here is my sample of add google street view to ESRI map.

https://transparentgov.net:3200/googlemaps/default?layer_id=0&layer=Colleges_and_University_Campuses&center_lat=37.19997157087345&center_long=-80.40640576520535&center_zoom=18&url=https%3A%2F%2Fservices.arcgis.com%2FV6ZHFr6zdgNZuVG0%2Farcgis%2Frest%2Fservices%2FColleges_and_University_Campuses%2FFeatureServer&overlayType=overlayType_none&panto=0

more details click here

https://transparentgov.net/clehttps://transparentgov.net/cleargov1/1755/how-to-add-google-street-view-to-esri-mapargov1/1755/how-to-add-google-street-view-to-esri-map

college_8.png

EventCount-GEP-10.2.1.zip

CatherineHall678

Awesome site! Clean and intuitive!

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,

I am using the Enhanced Coordinate Widget designed by Frederic Poliart from ESRI Australia to open a separate Google Maps Window.

https://community.esri.com/t5/experience-builder-custom-widgets/enhanced-exb-coordinate-widget/m-p/1302310

This replaces our Google Earth and Google Street View widgets we were using in WAB.

I really like how you have designed your Kenosha County Interactive Mapping Website.

https://mapping.kenoshacountywi.gov/InteractiveMapping/

Would you be kind enough to share your Custom Annotation Widget with us?

You have added every single feature I need to position and style my Annotation including adding a halo and specifying a custom Text Angle.

This is brilliant!

The ability to add Annotation is sorely missing in the ESRI Draw Widget for EXB at version 1.12.

Your Annotation Widget will be the perfect solution of all of us.

Best regards,

David Das

SarahRijneke

How does site viewer 360 differ from Oriented imagery? I'm looking into options for adding street-level imagery to some of my apps (Web AppBuilder or Experience Builder).

ClarkSelby

There are two new ways to effortlessly leverage 360 imagery and video in ArcGIS Online and Enterprise.

GeoTube for ArcGIS. This tool seamlessly integrates a YouTube video player directly within ArcGIS Experience Builder. GeoTube allows users to watch YouTube videos (2D or 360) within the web map while simultaneously displaying the associated location, visualizing the video path, and observing the playback location as features on the map. This enhanced user interface provides a comprehensive and intuitive understanding of the spatial relationship between videos and their corresponding geographic locations. You can learn more about GeoTube here: https://www.nodeology.net/geotube/.Visualize in YouTube. Analyze in ArcGIS.
SiteViewer 360 for ArcGIS: By capturing your site with a 360 camera, you can immerse yourself in panoramic views, enabling detailed analysis and exploration from every angle. ArcGIS Online 360 demos are available, featuring imagery of Hurricane Ian, Pittsburgh Steps, and Rails-to-Trails, at the bottom of this page: https://www.nodeology.net/site-viewer-360-for-arcgis/. Hurricane Ian 360 imagery

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

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.

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!

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

DavidCook2

an alternative option to google street maps would be mappilary. they have an addin for arcgis pro that does streetview side by side, seems like a less restrictive option with the same street level capabilites

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.

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 Analysis (harvard.edu)

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.