topic Re: Google Streetview and Javascript api in ArcGIS JavaScript Maps SDK Questions

Google Streetview and Javascript api

simonmiles — Fri, 17 Jun 2011 10:28:13 GMT

I was wondering if anyone could point me in the direction of a sample or examples of streetview working within a js api.

Thanks

Si

Re: Google Streetview and Javascript api

HemingZhu — Fri, 17 Jun 2011 12:36:55 GMT

I was wondering if anyone could point me in the direction of a sample or examples of streetview working within a js api.

Thanks

Si

Google streetview is a part of Google Map API written in javascript. So there should be no problem in coorperating it into a JS API app (Though i have not done in JS API, I personally did it in a JS API extension for Google Maps app and a Silverlight API app). Following several steps, you should be able to do it pretty easy.
1. Reference Google Map api like this: <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAafYhVvNL6Z1zKauFqmXIUxSFwSTfUFI-UnYzfYyRP8xyoN2P1RQdRxCT3T-hymFLj26OJYTdWGreZg" type="text/javascript"></script> (get your own key from esri or google).
2. create a GStreetviewPanorama and a GStreetviewClient instance.
3. use GStreetviewPanorama.getNearestPanorama(point or address, callback) to verify whether you have streetview available for that point or address.
4. If data available, then use GStreetviewClient.setLocationAndPOV(point or address) to open streeview to that point or address.
5 Optional. Use GEvent.addListener(GStreetviewPanorama, 'initialized', callback) to synchronize the streeview changed and the point symbol on your JS API map. Here is the part of my working code, hope it will give me some clue. (if a lot of people are interested, i will develop a sample JS API Page and post here)

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAafYhVvNL6Z1zKauFqmXIUxSFwSTfUFI-UnYzfYyRP8xyoN2P1RQdRxCT3T-hymFLj26OJYTdWGreZg"
        type="text/javascript"></script>

    <script type="text/javascript">
        var Glocator;
        var gviewClient;
        var Pano;
        var viewStatus = false;
        var viewAddress = "";
        var viewClickPoint;
        function openStreetView() {
            setupStreetViewUtilies();
            viewClickPoint = new GLatLng(window.opener.y, window.opener.x);
            gviewClient.getNearestPanorama(viewClickPoint, showStreetView);
            GEvent.addListener(Pano, "error", handleNoFlash);
        }
        function setupStreetViewUtilies() {
            if (Glocator == null) Glocator = new GClientGeocoder();
            if (gviewClient == null) gviewClient = new GStreetviewClient();
            if (Pano == null) Pano = new GStreetviewPanorama(document.getElementById("Results"));
        }
        function showStreetView(gStreetviewData) {
            if (gStreetviewData.code != 200) { //no street view for this location
                if (Pano != null) Pano.hide(); //hide the street view
                viewStatus = false;
                viewAddress = "";
                //self.close();
                //alert("No street view for this location");
            }
            else {   //street view is available
                viewStatus = true;
                viewAddress = gStreetviewData.location.description;
                viewClickPoint = gStreetviewData.location.latlng;
                GEvent.addListener(Pano, 'initialized', streetViewChanged); // add an event handling street view changes
                Pano.setLocationAndPOV(viewClickPoint); //push the pano to a this location
            }
            Glocator.getLocations(viewClickPoint, showStreetAddress); //show street address info
        }
        function handleNoFlash(errorCode) {
            if (errorCode == FLASH_UNAVAILABLE) {
                alert("Error: Flash doesn't appear to be supported by your browser");
                return;
            }
        }
        function showStreetAddress(response) {
            var descContent = "";
            if (!response || response.Status.code != 200) {
                if (viewAddress != "")
                    descContent = "<table width='95%'><tr><td><b>View Point Address:</b></td><td>" + getlocalAddress(viewAddress) + "</td></tr><tr><td><b>View Point Lat/Lon:</b></td><td>"
                else
                    descContent = "<table width='95%'><tr><td><b>View Point Address:</b></td><td>UnKnown Address</td></tr><tr><td><b>View Point Lat/Lon:</b></td><td>"
                descContent += viewClickPoint.lat() + ", " + viewClickPoint.lng() + "</td></tr><tr><td>";
            }
            else {
                var place = response.Placemark[0];
                var point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
                descContent = "<table width='95%'><tr><td><b>View Point Address:</b></td><td>" + getlocalAddress(place.address) + "</td></tr><tr><td><b>View Point Lat/Lon:</b></td><td>" + place.Point.coordinates[1] + ", " + place.Point.coordinates[0] + "</td></tr><tr><td>";
            }
            descContent += "<b>View Available:</b></td><td>" + viewStatus + "<td><tr></table>";
            document.getElementById("Desc").innerHTML = descContent;
        }
        function getlocalAddress(Addr) {
            var index = Addr.indexOf(',');
            return Addr.substring(0, index);
        }
        function streetViewChanged(streetLocation) {
            viewStatus = true;
            viewAddress = streetLocation.description;
            viewClickPoint = streetLocation.latlng;
            var corStr = viewClickPoint.lng() + "," + viewClickPoint.lat(); //call back on Map to plug in a new camera picture in changed location
            var SLPlugin = window.opener.document.getElementById("CityMap");
            SLPlugin.Content.CityMap.AddCameraOnMap(corStr);
            Glocator.getLocations(viewClickPoint, showStreetAddress);
        }
        function closePopup() {
            //clear up street view icon
            var SLPlugin = window.opener.document.getElementById("CityMap");
            SLPlugin.Content.CityMap.RemoveCameraOnMap();
        }
        function loadDirections() {
            alert(window.opener.dDriections);
            var directions = new Array();
            directions = window.opener.dDriections.split(':');

            var Desc_Table = "<table id='DirectionTB' width='400'>";
            //add rout name
            Desc_Table += "<tr><td><b>" + directions[0] + "</b></td></tr>";
            //add driving distances
            Desc_Table += "<tr><td><b>" + directions[1] + "</b></td></tr>";
            //add driving time
            Desc_Table += "<tr><td><b>" + directions[2] + "</b></td></tr>";
            //add driving steps
            for (var i = 3; i < directions.length; i++) {
                Desc_Table += "<tr><td><b>" + directions + "</b></td></tr>";
            }
            document.getElementById("Results").innerHTML = Desc_Table;
        }
    </script>

Re: Google Streetview and Javascript api

ScottDavis — Fri, 17 Jun 2011 13:31:11 GMT

I've been able to do it in a current project that I'm working on. Please be aware that this is still under development.

http://uplan.utah.gov

Re: Google Streetview and Javascript api

StephenLead — Mon, 20 Jun 2011 03:59:08 GMT

Scott, your link isn't working for me. It's failing with a 404 for the address http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dojo/nls/_en-gb.xd.js

Does the client need to do/install anything for this to work?

Re: Google Streetview and Javascript api

simonmiles — Mon, 20 Jun 2011 09:18:18 GMT

Hi hzhu,

Thanks for the pointers. I'm not savy with Sliverlight so if it wasnt too much to ask then seeing a JS sample would be great.

I too, cant access Scott's link!

Si

Re: Google Streetview and Javascript api

ScottDavis — Sat, 11 Dec 2021 18:39:50 GMT

Not sure what the problem is. I'm able to reach the site with no problems from outside of our network. Maybe our server was having problems?

Here is some of the relevant code:

        initViewer: function(llPoint){
  // summary:
  //  
  // mapPoint: esri.geometry.Point
  //  In UTM
  console.log(this.declaredClass + "::" + arguments.callee.nom, arguments);
  
  var svPoint = new google.maps.LatLng(llPoint.y, llPoint.x);
  var panoramaOptions = {
   position: svPoint,
   pov: {
    heading: 0,
    pitch: 0,
    zoom: 1
   }
  };
  this.panorama = new google.maps.StreetViewPanorama(dojo.byId("streetview-container-inner"), panoramaOptions);
  
  this.svService = new google.maps.StreetViewService();
  
  this.validateLocation(svPoint);
  
  this.wireEvents();
 },
        repositionViewer: function(llPoint){
  // summary:
  //  Points the viewer to a new position after the user clicks on the map
  // llPoint: esri.geometry.Point projected to lat long
  console.log(this.declaredClass + "::" + arguments.callee.nom, arguments);
  
  var svPoint = new google.maps.LatLng(llPoint.y, llPoint.x);
  
  this.panorama.setPosition(svPoint);
  this.validateLocation(svPoint);
 },
 onPovChanged: function(){
  // summary:
  //  Fires when the point of view of the streetview viewer is changed.
  //  Updates the graphic's orientation.
  //console.log(this.declaredClass + "::" + arguments.callee.nom, arguments);
  var symbol = this.graphic.symbol.setAngle(this.panorama.getPov().heading);
  this.graphic.setSymbol(symbol);
 },
 validateLocation: function(pnt){
  // summary:
  //  Checks to make sure that there is a valid panorama for the location
  // pnt: google.maps.LatLng
  console.log(this.declaredClass + "::" + arguments.callee.nom, arguments);
  
  this.svService.getPanoramaByLocation(pnt, 50, function(data, status){
   if (status != "OK"){
    dojo.style("no-data-message", "display", "block");
   } else {
    dojo.style("no-data-message", "display", "none");
   }
  });
 },

Re: Google Streetview and Javascript api

HemingZhu — Sat, 11 Dec 2021 18:39:53 GMT

Not sure what the problem is. I'm able to reach the site with no problems from outside of our network. Maybe our server was having problems?

Here is some of the relevant code:

        initViewer: function(llPoint){
  // summary:
  //  
  // mapPoint: esri.geometry.Point
  //  In UTM
  console.log(this.declaredClass + "::" + arguments.callee.nom, arguments);
  
  var svPoint = new google.maps.LatLng(llPoint.y, llPoint.x);
  var panoramaOptions = {
   position: svPoint,
   pov: {
    heading: 0,
    pitch: 0,
    zoom: 1
   }
  };
  this.panorama = new google.maps.StreetViewPanorama(dojo.byId("streetview-container-inner"), panoramaOptions);
  
  this.svService = new google.maps.StreetViewService();
  
  this.validateLocation(svPoint);
  
  this.wireEvents();
 },
        repositionViewer: function(llPoint){
  // summary:
  //  Points the viewer to a new position after the user clicks on the map
  // llPoint: esri.geometry.Point projected to lat long
  console.log(this.declaredClass + "::" + arguments.callee.nom, arguments);
  
  var svPoint = new google.maps.LatLng(llPoint.y, llPoint.x);
  
  this.panorama.setPosition(svPoint);
  this.validateLocation(svPoint);
 },
 onPovChanged: function(){
  // summary:
  //  Fires when the point of view of the streetview viewer is changed.
  //  Updates the graphic's orientation.
  //console.log(this.declaredClass + "::" + arguments.callee.nom, arguments);
  var symbol = this.graphic.symbol.setAngle(this.panorama.getPov().heading);
  this.graphic.setSymbol(symbol);
 },
 validateLocation: function(pnt){
  // summary:
  //  Checks to make sure that there is a valid panorama for the location
  // pnt: google.maps.LatLng
  console.log(this.declaredClass + "::" + arguments.callee.nom, arguments);
  
  this.svService.getPanoramaByLocation(pnt, 50, function(data, status){
   if (status != "OK"){
    dojo.style("no-data-message", "display", "block");
   } else {
    dojo.style("no-data-message", "display", "none");
   }
  });
 },

Attached is a modified esri sample page to include google streeview. As you can see, adding a google streetview is simple and straightforward and can be easily integrated into javascript client environment.

Re: Google Streetview and Javascript api

nicogis — Mon, 20 Jun 2011 19:10:38 GMT

I have added a widget for viewer js esri.

You can get code and arrange your page: http://www.arcgis.com/home/item.html?id=2ba0b738ae2c444f88c69ccd0d37c3f4

Re: Google Streetview and Javascript api

simonmiles — Thu, 23 Jun 2011 13:50:40 GMT

hzhu

Thats a wicked sample and thank you very much indeed.

Si

Re: Google Streetview and Javascript api

ChristopherPollard — Wed, 20 Jun 2012 18:40:57 GMT

Hzhu,
Great example and explanation on getting Streetview added to the ESRI AGS Javascript API.

Anyway that you plan on updating the example to work with the Gmaps API v3?
As well as a newer version of the AGS Js API (2.8 or 3.0)?

I also can't seem to get your current example to trigger a streetview change of location when I select a new location.

I am going to try update your sample sometime soon but I want to reach out to you first.
Thanks,
Chris Pollard

Re: Google Streetview and Javascript api

HemingZhu — Wed, 20 Jun 2012 19:52:29 GMT

Hzhu,
Great example and explanation on getting Streetview added to the ESRI AGS Javascript API.

Anyway that you plan on updating the example to work with the Gmaps API v3?
As well as a newer version of the AGS Js API (2.8 or 3.0)?

I also can't seem to get your current example to trigger a streetview change of location when I select a new location.

I am going to try update your sample sometime soon but I want to reach out to you first.
Thanks,
Chris Pollard

Sorry I don't believe we had a plan to upgrade to Google map API 3.0. My time is restraint. This sample should work on any versions of JS API. In terms of you question, you could upload the code if you do mind and i will take a look!

Re: Google Streetview and Javascript api

NianweiLiu — Thu, 21 Jun 2012 16:25:17 GMT

Does this work for you?
http://www.arcgis.com/home/item.html?id=a8f78cc6adea48cb8e962d7e36b9d010

Re: Google Streetview and Javascript api

ChristopherPollard — Thu, 21 Jun 2012 19:48:26 GMT

Nianwei,
Your sample works great but after I modified it and added a map "onclick" identify function I couldn't figure out how to disable any map event if the streetview window was open.
When I would click on the close button for streetview window it would execute the identify function.

Here's my application (one of many) that I am using your script.
http://www.dvrpc.org/webmaps/CMP/
I removed the streetview option but would love to use it for some of my application are transportation related and Streetview is a huge function.

Also will you be updating any of your examples to be able to turn off the Google's 45degree imagery?
If you zoom in to your http://gmaps-utility-gis.googlecode.com/svn/trunk/agsjs/examples/manualgallery.html Map Gallery example the Satellite/hybrid automatically turns the 45 degree images on and you can't see the dynamic map overlay.....

Here's another web mapping app that I am using your arcgislink script.
http://www.dvrpc.org/webmaps/pedbikecounts/
The 1 issues I seem to have with this is that sometimes the dynamic map service is displayed in the wrong location.
Seems to be some issue with which image returns 1st? (googles Map api or ESRI's Js Api image)?

Any help or advice would be greatly appreciated. Thanks for all your great work
http://www.dvrpc.org/Mapping/webmaps.htm

Re: Google Streetview and Javascript api

MarcusBush — Mon, 18 Mar 2013 15:41:13 GMT

hzhu's example worked wonderfully for Google's V2 API, the code however has changed from Google for V3.

Does anyone have an updated example of hzhu's code that would work with V3 possibly?

Re: Google Streetview and Javascript api

JohnnyPenet — Tue, 19 Mar 2013 11:32:08 GMT

I was wondering if anyone could point me in the direction of a sample or examples of streetview working within a js api.

Thanks

Si

Hi Simon,

You can look at this document explaining an example of using a WMS layer in combination with streetview. This was an example of combining Google Streetview with locations coming from an other spatial reference an puting it into a dojo widget.

Johnny

http://jpenet.blogspot.be/2012/05/arcgis-javascript-api-using-google.html

Re: Google Streetview and Javascript api

DavidChrest — Thu, 18 Feb 2016 16:23:48 GMT

Heming Zhu,

Thanks you so much for that wonderful Street View sample. Love how this can easily work with the ArcGIS JS API. I'm assuming this should work with ArcGIS JS API version 3.15, correct? How about 4.0 beta3? I plan to test soon, but at any rate, many, many thanks for your sample!

David

Re: Google Streetview and Javascript api

HemingZhu — Wed, 29 Jun 2016 17:45:35 GMT

David,

Sorry for not answering your question for so long. I am pretty sure Streeview will work with JS API version 3.15. Well since I am just starting to look at the JS API 4.0, I can't give your a sure answer. However i can't see any reasons why it won't work with version. Google API and JS API are all written in Javascript, they are all about filling html elements(div etc) map content or component.

Let me know if you encounter any issues when you use Streeview with version 4 because i am just as curious as you on this same issue.

Heming

Re: Google Streetview and Javascript api

ThomasJansen — Thu, 28 Jul 2016 16:46:03 GMT

I would be very interested in being able to implement this as an action within a popup in version 4.0