Trying Street View on Google Maps

Yesterday SG-GTUG had gathering and the topic was Google Maps. Unfortunately I could make it. As we all know, recently Google had launched Street View including in Singapore. So, I decided to play with the Street View.

What I did was, I created a simple prototype page that loads the street view at Orchard rd (Singapore). I wanted to create virtual tour – simplified version – from one end of Orchard rd (Tanglin) to the others (Plaza Singapura).

It was not that difficult to start but not without challenges. The basis still Google Maps API, using a few additional classes for street view such as GStreetviewClient,Ā  GStreetviewPanorama and GStreetviewData. Here is the screen shot; maps + street view and a few button for controls.

I observed that the street view actually blur out the car’s plate number and people’s face. I guess that is for privacy :).

Street View on Google Maps
Street View on Google Maps

Some of the challenges and problems encountered during the development

  • Street View goes black or stuck. Orchard Rd is pretty long and after clicking “Next” many many times or animating the street view, it will goes black and hang. Especially when reaching end of the blocks. I am not too sure what the cause is. Could be limitation, out of memory or the service prevented me from continuously sending request. Hope to figure out the workaround.
  • Unable to pick the right panorama ID. When the street gets complex – at a junction with the same road name – it gets hard to decide which direction to pick. I had to hard code 1-2 of the unwanted panorama ID.

Some limitation

  • It currently works on Orchard Rd only. Anyway that is my original intention šŸ™‚
  • It does not stop at the end of Orchard Rd. I have not figure out how to stop the animation at the end of the road.

To begin, simply instantiate the 2 views as shown below. Create GMap2 and GStreeviewPanorama object.

  var orchardRd = new GLatLng(1.307001, 103.828203); // starting location
  var orchardRdPOV = {yaw: currentYaw,pitch: currentPitch};
  panoClient = new GStreetviewClient();

  map = new GMap2(document.getElementById("map_canvas"));
  map.setCenter(orchardRd, 15);

  myPano = new GStreetviewPanorama(document.getElementById("pano"));
  myPano.setLocationAndPOV(orchardRd, orchardRdPOV);
  GEvent.addListener(myPano, "error", handleNoFlash);
  panoClient.getNearestPanorama(orchardRd, showPanoData);

Then added the event handler to retrieve the street view data. These are the important pieces of code, the rest are for control and animation. I won’t be showing the full code here. It is available at http://www.wswijaya.com/prototype/test-street-view.php.

function showPanoData(panoData) {
	if (panoData.code != 200) {
          GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
	  return;
	}

	nextPanoId = panoData.links[0].panoId;
	for (i = panoData.links.length - 1; i > -1 ; i--) {
		strTest = panoData.links[i].description;
		found = false;
		if (strTest == "Orchard Rd") {
			if (hasVisitedBefore(panoData.links[i].panoId))
			   found = false;
			else {
	  		   nextPanoId = panoData.links[i].panoId;
	  		   found = true;
	  	        }
		}
		if (found) break;
	}

	var displayString = [
	  "Panorama ID: " + panoData.location.panoId,
	  "LatLng: " + panoData.location.latlng,
	  "Description: " + panoData.location.description,
	  "Next Pano ID: " + nextPanoId
	].join("<br/>");
	map.openInfoWindowHtml(panoData.location.latlng, displayString);

	prevPanoId[panoData.location.panoId] = panoData.location.panoId;
	myPano.setLocationAndPOV(panoData.location.latlng);
}

If you guys have workaround to resolve the stuck issue, do share with me. Enjoy the street view šŸ™‚

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s