Adding Street View to web pages

Street View has been available for a while but it didn’t interest me too much until recently when it launched in the UK. Then I noticed it was available as a part of the Google Maps API so I decided I’d add it to the Random Pub Finder. I initially thought it would work like the user interface available on the Google Maps website, but it doesn’t seem such an integrated solution is possible. To be fair, dragging the little man around your map probably isn’t what you’ll want to do generally so this isn’t a big issue, and if you’re clever you could probably implement this kind of solution anyway. I was pleased to find it was very easy to add to the site. First add a div to your page that will contain the Flash control

  <div name="pano" id="pano" style="width: 750px; height: 300px">
    <div id="panoError" style="text-align: center; margin-top: 100px;color: #aaa;">Loading...</div>
  </div>

Then add  a reference to the Google Maps API script.

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAjtZCgAx5i04BiZDO6HlxhRSDF8NMhBf90dVWYNzYEfop4QQs3RSkYVE7vnmvtIBRRQjoFXq4kz15Mg" type="text/javascript"></script>

Finally add some JavaScript to initialise the control.

    function load()
    {
      var latLong = new GLatLng(51.412640159832, -0.30039334012124);
      var panoramaOptions = { latlng:latLong };
      var myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
      GEvent.addListener(myPano, "error", handlePanoError);
    }

    function handlePanoError(errorCode)
    {
      var error = "An error occurred";
      if (errorCode == 600)
      {
        error = "No street view available";
      }
      else if (errorCode == 603)
      {
        error = "The Flash plugin is not available";
      }

      document.getElementById("panoError").innerText = error;
    }

Actually a lot of this JavaScript isn’t even needed, you can get away with just the first three lines of the load function, but the rest is useful for error handling. Error 600 can happen quite frequently so is best handled in some manner. I’ve not seen error 603 myself but I’ve shown it here because some of the code examples I’ve seen use the constant FLASH_UNAVAILABLE, which doesn’t seem to be defined anywhere, meaning when any error occurs you’ll actually get a script error if you use this constant. I guess there are more errors that can occur but I’ve not come across them yet.