Please suggest a sample/code to show the street view of a point feature from InfoTemplate.
Thanks,
Naveen Mandava.
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
Tom Sellsted naveen mandava this ROCKS. Thanks both
That is really slick Tom, way to go. Hope to see you at Dev again here shortly-
David
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
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
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
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
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:
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