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

[ChrisSergent]

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

[SteveCole · Accepted solution]

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.

[ChrisSergent]

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

[ChrisSergent]

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.

[SteveCole]

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");
        }

[ChrisSergent]

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.

[DavidBlanchard]

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.

[ChrisSergent]

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