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 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?

Find more posts tagged with

Accepted answers

evtguy

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.

All comments

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.

ChrisSergent

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

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'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.

evtguy

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 this out. Thanks. Will let you know if it works.

evtguy

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.

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.