Google Streetview and Javascript api

10941
17
06-17-2011 03:28 AM
simonmiles
New Contributor II
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
17 Replies
HemingZhu
Occasional Contributor III
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-UnYzfYyRP8xyoN2..." 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-UnYzfYyRP8xyoN2..."
        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>
ScottDavis
Occasional Contributor
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
0 Kudos
StephenLead
Regular Contributor III
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?
0 Kudos
simonmiles
New Contributor II
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
0 Kudos
ScottDavis
Occasional Contributor
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");
   }
  });
 },
0 Kudos
HemingZhu
Occasional Contributor III
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.
DavidChrest
Occasional Contributor II

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

0 Kudos
nicogis
MVP Frequent Contributor
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
0 Kudos
simonmiles
New Contributor II
hzhu

Thats a wicked sample and thank you very much indeed.

Si
0 Kudos