topic Re: How do I add Google Street View to my ArcGIS API for JavaScript apps? in ArcGIS JavaScript Maps SDK Questions

How do I add Google Street View to my ArcGIS API for JavaScript apps?

ChrisSergent — Wed, 17 Dec 2014 17:02:39 GMT

The Flex Builder app has a widget to add Google Street View to Esri maps. How would I do that in the JavaScript API?

Re: How do I add Google Street View to my ArcGIS API for JavaScript apps?

SteveCole — Sat, 11 Dec 2021 15:33:56 GMT

I've added it to my application as a context menu item. I implemented it based on ESRI's context menu sample and then added my own code:

          ctxMenuForMap.addChild(new MenuItem({
            id: "lblStreetview",
            label: "Open Location in Google Streetview",
            onClick: function() {
                openStreetview(currentMouseLocation);
            }

        function openStreetview(theLocation) {
            var theLatLongGeom = webMercatorUtils.webMercatorToGeographic(theLocation);
            var theUrl = "http://maps.google.com/maps?q=Your+Sign+Location+in+Street+View@" + theLatLongGeom.x + "," + theLatLongGeom.y + "&cbll=" + theLatLongGeom.y + "," + theLatLongGeom.x + "&layer=c";
            window.open(theUrl, 'Streetview', "height=500,width=800,resizable=yes,scrollbars=yes");
        }

Note that you'll need to add a reference for the webMercatorUtils.

Re: How do I add Google Street View to my ArcGIS API for JavaScript apps?

ChrisSergent — Wed, 17 Dec 2014 17:25:01 GMT

I'll try this out. Thanks. Will let you know if it works.

Re: How do I add Google Street View to my ArcGIS API for JavaScript apps?

SteveCole — Sat, 11 Dec 2021 15:33:59 GMT

I've also added a couple other options based on the lat/long location clicked. These may or may not be applicable to your project:

Bing also has an oblique aerial view (based on Pictommetry products) which you can display:

        ctxMenuForMap.addChild(new MenuItem({
            id: "lblBirdsEye",
            label: "Open Location in Bing\'s Birds Eye View",
            onClick: function() {
                openBirdsEye(currentMouseLocation);
            }

        function openBirdsEye(theLocation) {
            var theLatLongGeom = webMercatorUtils.webMercatorToGeographic(theLocation);
            var theUrl = "http://bing.com/maps/default.aspx?cp=" + theLatLongGeom.y + "~" + theLatLongGeom.x + "&style=b&dir=0#ToggleTaskArea";
            window.open(theUrl, 'BirdsEye', "height=650,width=800,resizable=yes,scrollbars=yes");
        }

Finally, pull up NWS weather forecasts for a given location:

          ctxMenuForMap.addChild(new MenuItem({
            id: "lblShowWeather",
            label: "NWS Forecast For This Location",
            onClick: function() {
                openWeatherForecast(currentMouseLocation);
            } 
          })); 

        function openWeatherForecast(theLocation) {
            var theLatLongGeom = webMercatorUtils.webMercatorToGeographic(theLocation);
            var theUrl = "http://forecast.weather.gov/MapClick.php?lon=" + theLatLongGeom.x + "&lat=" + theLatLongGeom.y;
            window.open(theUrl, 'Forecast', "height=600,width=1050,resizable=yes,scrollbars=yes");
        }

Re: How do I add Google Street View to my ArcGIS API for JavaScript apps?

ChrisSergent — Thu, 18 Dec 2014 15:14:48 GMT

I'll try that as well and let you know. I ran into a glitch so I have to come back to this as soon as I fix another issue. Thanks for the feedback.

Re: How do I add Google Street View to my ArcGIS API for JavaScript apps?

DavidBlanchard — Thu, 18 Dec 2014 17:38:42 GMT

You may want to review the Google Maps/Google Earth APIs Terms of Service‌ as Google doesn't generally allow their products to be displayed alongside non-Google maps, including Street View (the exception being if the interface does not provide any map). Sections 9.1.1 and 10.1.1 are particularly relevant, but as always, you should review the entire document to ensure you are not breaching the TOS.

Re: How do I add Google Street View to my ArcGIS API for JavaScript apps?

ChrisSergent — Thu, 18 Dec 2014 20:11:26 GMT

I read it. It will be in a separate window like the FlexViewer.

Re: How do I add Google Street View to my ArcGIS API for JavaScript apps?

ChrisSergent — Wed, 24 Dec 2014 21:40:01 GMT

I have it working with web mercator. I just need to make it work with our spatial reference. I will leave this open as I try out the code.