on Code

OpenLayers with a Google Street View Widget

Last month I posted about OpenLayers with a Virtual Earth Widget. I had a business need for that one. This one I’m doing just because I darn well can.

First things first - you’ll have to reference the Google Maps API, which means you’ll need a site-specific API key. Once you have the key, include the GM JavaScript in the head of your web page:

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=big-honking-google-maps-api-key" type="text/javascript"></script>
Next, you'll need a container on your page for the Street View flash object:
<div id="streetview" style="position:relative; width:500px; height:500px;"></div>
Now we're going to make sure our OpenLayers and Street View JavaScript objects live for the life of our page by declaring them globally. We're calling our OpenLayers map "map" and, well, you can figure out the other one.
var map, streetview;
Now we need to register the object at startup. Again, I'm using jQuery's page ready function, but you can use your body onload event or the equivalent in another JS library. The map_init() function is just getting OpenLayers up and running so we can have get the center of that map to pass to streetview.
$(document).ready(function() { map_init(); var longlat = map.getCenter(); var theloc = new GLatLng(longlat.lat,longlat.lon); streetview = new GStreetviewPanorama(document.getElementById("streetview")); GEvent.addListener(streetview, "error", StreetViewError); streetview.setLocationAndPOV(theloc); });
Here we're getting the center of our OpenLayers map and creating a GLatLng object at that location. Next we create the GStreetviewPanorama object and set it to our streetview div, and an event listener (I'll get to that in a minute), and pan the streetview object to the lat-long.

Now we need to make the Street View map follow the OpenLayers map around with the moveend event.

map.events.register("moveend", map, function(e) { var longlat = map.getCenter(); var theloc = new GLatLng(longlat.lat,longlat.lon); streetview.setLocationAndPOV(theloc); });
Viola. A Google Maps Street View widget that will follow your OpenLayers map as you pan and zoom.

Now for the event listener. Two bad things can happen when using Street View: the user can either not have Flash installed, or there can be no Street View data near the coordinates. Both will raise an error. We don’t like errors, so we assigned an event listner to pass all error messages to the StreetViewError function. Here’s what it looks like:

function StreetViewError(errorCode) { if (errorCode == 603) { alert("Error: Flash doesn't appear to be supported by your browser"); return; } if (errorCode == 600) { $("#streetview").html("Street View Not Available For This Location"); return; } }
If the user doesn't have Flash installed, this pops up a big message screaming that fact at them. A more subtle thing to do would be to not show the widget at all if flashembed.isSupported() returns false. But I digress.

Showing an alert box whenever Street View is not available would very quick drive your users insane. Here we’re using a little jQuery to replace the HTML in the streetview div we created with a simple message alerting them to the fact. This also has the benefit of getting rid of the last good streetview location, as it will stick in your widget if an error is raised by your subsequent setLocationAndPOV, so you’ll be looking at the wrong place.

That’s about it. It’s up and running in Geospatial Portal (source code on the projects page) - lower “+” on the right, which houses both Virtual Earth and Google Maps Street View.

One thing to note about the Google Street View flash object - something flaky goes on if you hide the Street View object. I can’t put my finger on it, but if you hide it, sometimes it will come back in the right location, and sometimes it won’t. I’ve found the only way around it is to recreate the GStreetviewPanorama when it’s hidden and brought back up. Not ideal, but it’s more ideal than having it intermittently spaz on your users.