topic Re: StreetView InfoTemplate in ArcGIS JavaScript Maps SDK Questions

StreetView InfoTemplate

naveenmandava1 — Thu, 11 Feb 2016 16:03:47 GMT

Please suggest a sample/code to show the street view of a point feature from InfoTemplate.

Thanks,

Naveen Mandava.

Re: StreetView InfoTemplate

naveenmandava1 — Tue, 16 Feb 2016 21:44:35 GMT

For those who is seeking for help in this task; I post code myself. Hope this helps someone.

Re: StreetView InfoTemplate

TomSellsted — Sat, 11 Dec 2021 18:36:45 GMT

Naveen,

Very nice! I took your code and applied it to a map info window, added some logic to set the heading POV and updated the code to use AMD style coding. Here is my sample:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>StreetView InfoWindow</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
    <style>
        html,
        body,
        #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=<Your_Google_Maps_Key>&signed_in=true">
    </script>
    <script src="https://js.arcgis.com/3.15/"></script>
    <script>
        var map;
        require([
            "esri/map",
            "dojo/dom-construct",
            "dojo/domReady!"
        ], function(
            Map, domConstruct
        ) {

            map = new Map("map", {
                basemap: "topo",
                center: [-120.537, 46.592],
                zoom: 17
            });

            map.on("load", function() {
                map.infoWindow.resize(500, 300);
            });

            map.on("click", showStreetView);

            var svNode = domConstruct.create("div", {
                style: "width:480px;height:230px;margin-top:0px;display:block;overflow: auto",
                innerHTML: ''
            });
            map.infoWindow.setContent(svNode);

            function showStreetView(evt) {
                var latitude = evt.mapPoint.getLatitude();
                var longitude = evt.mapPoint.getLongitude();

                var streetviewService = new google.maps.StreetViewService();
                var svLocation = new google.maps.LatLng(latitude, longitude);

                streetviewService.getPanoramaByLocation(svLocation, 200, function(result, status) {
                    if (status == google.maps.StreetViewStatus.OK) {
                        var panoLocation = result.location.latLng;
                        var heading = google.maps.geometry.spherical.computeHeading(panoLocation, svLocation);
                        var panoramaOptions = {
                            position: panoLocation,
                            pov: {
                                heading: heading,
                                pitch: 5,
                                zoom: 1
                            },
                            visible: true
                        };

                        var pano = new google.maps.StreetViewPanorama(svNode, panoramaOptions);

                        map.infoWindow.setContent(svNode);
                    } else {
                        svNode.innerHTML = "Street View is not available at this location.";
                        map.infoWindow.setContent(svNode);
                    }
                    map.infoWindow.setTitle("Street View - lat: " + latitude.toFixed(6) + ", lon: " + longitude.toFixed(6));
                    map.infoWindow.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));
                });
            }


        });
    </script>
</head>

<body>
    <div id="map"></div>
</body>

</html>

You can view a working sample at: StreetView InfoWindow

I am not completely sure that this is within the Google Map policies, but it works...

Best Regards,

Tom

Re: StreetView InfoTemplate

Anonymous User — Thu, 18 Feb 2016 22:07:52 GMT

Tom Sellsted naveen mandava this ROCKS. Thanks both

Re: StreetView InfoTemplate

DavidColey — Thu, 18 Feb 2016 22:16:25 GMT

That is really slick Tom, way to go. Hope to see you at Dev again here shortly-

David

Re: StreetView InfoTemplate

TomSellsted — Thu, 18 Feb 2016 22:36:03 GMT

David,

Thanks! Cheers to Naveen for his code too.

I am not attending this years Dev Summit. I had a conflict in schedule that prevents me from attending this year. I am sure it will be a great time. Have fun!

Best Regards,

Tom

Re: StreetView InfoTemplate

DavidChrest — Fri, 19 Feb 2016 14:58:44 GMT

Tom, thanks so very much for your sample code! Love it! Been wanting something like this for a long time but never got around to tinkering with Google's API.

Check out Pricing and Plans | Google Maps APIs | Google Developers

"Free until exceeding 25,000 map loads per day for 90 consecutive days ." So should be OK unless used by a massive amount of users all the time (I think).

Also, check out this older post: Google Streetview and Javascript api

A lot of back and forth but in there is the attached code from Heming Zhu. Another great example of StreetView usage in an ArcGIS JS web app.

David

Re: StreetView InfoTemplate

TomSellsted — Fri, 19 Feb 2016 16:28:50 GMT

David,

You are most welcome! It was a fun project to work on.

Thanks very much for the information the pricing and plans. We should never exceed that amount of usage. I have a couple of ideas of how to integrate a streetview infowindow to into some of my other apps, but the volume should never come close to that level.

Thanks for the link to the older post too. Lots of interesting ways to use streetview.

Best Regards,

Tom

Re: StreetView InfoTemplate

DavidChrest — Thu, 24 Mar 2016 14:25:05 GMT

Tom,

Your code works great (of course) in Chrome and Firefox, but there seems to be an issue in Internet Explorer (of course). In IE, the popup info window appears but there is no SV imagery, just blank. I was just wondering if you knew of a work around or some code corrections. I have recently learned how "unforgiving IE can be.

Thanks so much for any help you can provide.

David

Re: StreetView InfoTemplate

TomSellsted — Sat, 11 Dec 2021 18:36:48 GMT

David,

I found the problem. I had a couple of lines of code that were poorly placed. The setContent for the infoWindow was embedded in the getPanoramaByLocation logic. I moved those two lines outside of that function and it works properly now. You can view the app at:

StreetView InfoWindow

Here is the code that was changed:

                streetviewService.getPanoramaByLocation(svLocation, 200, function(result, status) {
                    if (status == google.maps.StreetViewStatus.OK) {
                        var panoLocation = result.location.latLng;
                        var heading = google.maps.geometry.spherical.computeHeading(panoLocation, svLocation);
                        var panoramaOptions = {
                            position: panoLocation,
                            pov: {
                                heading: heading,
                                pitch: 0,
                                zoom: 1
                            },
                            visible: true
                        };


                        var pano = new google.maps.StreetViewPanorama(svNode, panoramaOptions);


                    } else {
  svNode.innerHTML = "Street view is not available at this location";
                    }
                });
  map.infoWindow.setContent(svNode);
  map.infoWindow.setTitle("Street View - lat: " + latitude.toFixed(6) + ", lon: " + longitude.toFixed(6));

Regards,

Tom

Re: StreetView InfoTemplate

DavidChrest — Fri, 25 Mar 2016 13:31:39 GMT

Works great! Thanks so much again!

David

Re: StreetView InfoTemplate

TomSellsted — Fri, 25 Mar 2016 15:03:20 GMT

David,

You are welcome! Thanks very much for letting me know. Just a good reminder that I should always test in Internet Explorer.

Regards,

Tom