The first thing to consider is the how to encode the required location into the URL. The internet standard for doing this is to create a query string. The query string is the part of the URL that follows the name of your web page. It starts with a question mark, and then a list of key/value pairs, seperated by ampersands (&), as shown below:
http://www.mysite.com/myapp/index.html?productid=87789&store=Oxford&instock=true
Typically this URL is encoded by an HTML page with a form on it. When you click the submit button, the values of all the input elements are encoded into a query string and sent to a web page or server-side script that you specify. However, sometimes you'll need to format this yourself. For example, suppose you have a table in a database that contains lat/lng values. You want to be able to display this information on a web page and allow the user to click on a button on the page to see that location on the map. Or, you might be writing a mapping application which offers users the ability to bookmark favourite locations. However, regardless of the way in which the URL is formed, once your page receives these parameters, you'll need to parse them so that your application can make sense of them. Let's go back to our problem: how to display StreetView data based on a location passed via a URL. Well, let's first consider how we would do this for a map. A map requires a center point (consisting of a latitude and longitude coordinate) and a scale (represented by the "zoom level"). So our query string needs to look like this:
http://localhost:8080/gmaps_samples/streetview1.html?lat=48.85832&lng=2.294223&zoom=18
In our receiving page, we can access the query string portion of the URL from window.location.search. Unfortunately, that gives us the leading ? which we don't need, so we can just substring that out using window.location.search.substring(1) to get this string:
lat=48.85832&lng=2.294223&zoom=18
We can then use JavaScript's split() function to break up this string at each ampersand, to give us an array that looks like this:
["lat=48.85832", "lat=2.294223", "zoom=18"]
We then loop through each element of this array and create a JavaScript object consisting of key/value pairs. The key is the part to the left of the = and the value is the part to the right:
var qsParm = {};
function parseQueryString() {
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i = 0; i < parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0) {
var key = parms[i].substring(0, pos);
var val = parms[i].substring(pos + 1);
qsParm[key] = val;
}
}
initializeMap(qsParm["lat"], qsParm["lng"], parseInt(qsParm["zoom"]));
}
This bit of code then retrieves the lat, lng and zoom properties of our JavaScript object and passes it to the initializeMap() function that will set up our map. So the only thing we need to do is make sure that this parseQueryString() function runs when the page loads. We can use the Google Maps API convenience method google.maps.event.addDomListener() for that:
google.maps.event.addDomListener(window, 'load', parseQueryString);
Within our initializeMap() method we instantiate the map in the usual way, using the passed in parameters to set the mapCenter and zoom properties:
function initializeMap(lat, lng, zoom) {
var mapCenter = new google.maps.LatLng(lat, lng);
var mapOptions = {
center : mapCenter,
zoom : zoom
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
That will give us our map centered on and zoomed into the location of our choosing. But what about StreetView?
Well, StreetView doesn't require much extra from us. To instantiate it, we need to use a google.maps.StreetViewPanorama object instead of google.maps.Map, and a StreetViewPanoramaOptions object instead of MapOptions.
var panoramaOptions = {
position : mapCenter,
pov : {
heading : 34,
pitch : 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
To set the correct location, we just use the same object in the panoramaOptions.position property that we used to set the centre of the map. You can see that there is also a pov property that allows us to set a heading and a pitch. These correspond to the rotation and up/down camera position respectively. I've just hardcoded these for this example, but there is no reason why you couldn't use these as query parameters too, if you wanted to have more control over your user's experience of StreetView in your application.
Finally, we add the panorama object to the web page:
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
You can try it out here. There are a few predefined locations you can zoom into, or you can enter your own map coordinates. If you're struggling to find the coordinates for your chosen location, I have written a little helper app. Just make sure StreetView is enabled at your location. You can check StreetView coverage here.
