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

Google Streetview and Javascript api

simonmiles

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

Najděte více příspěvků označených jako

Accepted answers

All comments

ThomasJansen

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

HemingZhu

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

DavidChrest

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

JohnnyPenet

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

MarcusBush

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?

ChristopherPollard

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

NianweiLiu

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

HemingZhu

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!

ChristopherPollard

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

simonmiles

hzhu

Thats a wicked sample and thank you very much indeed.

Si

nicogis

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

HemingZhu

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.

JSAPI_streetview.txt.zip

ScottDavis

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");
   }
  });
 },

simonmiles

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

StephenLead

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?

ScottDavis

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

HemingZhu

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>

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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