StreetView InfoTemplate

naveenmandava1 · ‎02-11-2016

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

Thanks,

Naveen Mandava.

naveenmandava1 · ‎02-16-2016

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

TomSellsted · ‎02-18-2016

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

Anonymous User · ‎02-18-2016

Tom Sellsted naveen mandava this ROCKS. Thanks both

DavidColey · ‎02-18-2016

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

David

TomSellsted · ‎02-18-2016

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

DavidChrest · ‎02-19-2016

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

TomSellsted · ‎02-19-2016

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

DavidChrest · ‎03-24-2016

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

TomSellsted · ‎03-24-2016

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