Question

I’m building a virtual tour application using custom panoramas inside Google’s street view. The link behavior is odd in two respects:

1. Accessing and refreshing via localhost results in no links showing on start panorama. Changing web access to IP address solves this issue
2. When accessed via IP adress, the first link event executes and I move to the second panorama. No links are loaded in the second panorama, even though the links array inside the panorama object shows the expected data.

Google has some examples on their site, and I’ve been using that as a starting point.

One issue is that each example I’ve run across requires the specific writing out by hand of all values for each panorama. As this tour will have ~100 stops, this approach is unusable. So I adapted the examples getCustomPanorama and createCustomLinks functions to work off arrays.

Rather than relying on the switch method in Google’s example, I kept the database return as a JSON object and iterate over that to gice the values required.

function getCustomPanorama(pano, zoom, tileX, tileY){
  var obj;
  for (var i=0; i<tourData.length; i++){
    if (tourData[i].name == pano){      
      obj = {
        location: { //create StreetViewLocation object
          pano: tourData[i].name,
          description: tourData[i].name,
          latLng: google.maps.LatLng(tourData[i].lat, tourData[i].lon)
        },
         links: [], //create StreetViewLink object 
        tiles: { //create a StreetViewTileData object with properties
          tileSize: new google.maps.Size(tourData[i].width, tourData[i].height),
          worldSize: new google.maps.Size(tourData[i].width, tourData[i].height),
          centerHeading: tourData[i].heading,
          zoom: -1,
          getTileUrl: getCustomPanoramaTileUrl
        }
      } //end object creation

      break;
    }
  }
  return obj;
}

Same with creating the custom links.

function createCustomLinks(){
  var panoLinks = panotour.getLinks();
  var panoID = panotour.getPano();

  var links = $.ajax({
    type: "GET",
    url: "includes/phpscripts.php?action=getLinks&name="+panoID,
    dataType: "json",
    success: function(data){
      if (data){
        console.log("Links grabbed: "+data.length);

        //loop over response, add link to array
        for(var i=0; i<data.length; i++){
          panoLinks.push({'heading': data[i].heading, 'description': data[i].description, 'pano': data[i].description});
        }

        console.log("Panorama Lins: "+panoLinks)

      } else {
        console.log("Can't get link info");
      }
    }   
  });
}

Any help in solving these issues is appreciated.

Answer 1

Before debugging anything you probably should switch to Chrome (if you aren’t using that already). I was looking at the Google example and it worked fine there, but in Firefox 13 the “Google Sydney” link is sometimes missing when I reload the page. Not too reliable if one is trying to figure out why the links do not appear.

As for your problem:
The first thing I would try (due to the nondeterministic behaviour described above) is making the .ajax()call inside createCustomLinks synchronous by setting async: false and see if this changes anything. You might be populating the links after they were evaluated to be shown on the map.

I guess you would need to put up a working example to get more help with this one.