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

StreetView InfoTemplate

naveenmandava1

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

Thanks,

Naveen Mandava.

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

TomSellsted

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

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

JSAPI_streetview.txt.zip

TomSellsted

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

dcoley

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

David

Anonymous User

Tom Sellsted naveen mandava this ROCKS. Thanks both

TomSellsted

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

naveenmandava1

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

StreetView.txt.zip

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.