Silverlight: Adding Google Streets View, part 2

Continued from Adding Google Streets View, using Google API V3 instead of V2

Or actually “ops…”

During the testing stage for our application my Team Leader installed the application on another server and tried to run it. He got this pop-up for his trouble:

Message from webpage

This web site needs a different Google Maps API key. A new key can be
generated at http://code.google.com/apis/maps/signup.html.

Now while using the original code I had a problem with one line of code:

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

More precisely the part of: key=DioG342lPJG3WTn3zmQqebsjVg

But I thought to myself – “It works…”

Well the bite in the ass has come…

So what is this key?

It seems Google Map API V2 requires each domain to be registered and then to use an API key. I didn’t want to do that because we had too many servers with different domains (with new environments added all the time).

Getting such a key though is as easy as registering here, but be sure to first read the FAQ (more on that in my previous post).

 

Google API V3 to the rescue…

In Google API V3 they removed the need for API key, but they also changed the API so that the current JavaScript code doesn’t work.

So I rewrote it to this:

Code Snippet

1. <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
2. <script type="text/javascript">
3.  
4.     function streetView(lat, lng) {
5.         var client = new google.maps.StreetViewService();
6.         var streetViewLocation = new google.maps.LatLng(lat, lng);
7.         client.getPanoramaByLocation(streetViewLocation, 50, function (result,
8.             status) {
9.             if (status == google.maps.StreetViewStatus.OK) {
10.                 var panoramaOptions = {
11.                     position: streetViewLocation,
12.                     pov: {
13.                         heading: 34,
14.                         pitch: 10,
15.                         zoom: 1
16.                     },
17.                     visible: true,
18.                     addressControl: true
19.                 };
20.                 document.getElementById("GoogleStreetViewContainer").style.display = 'block';
21.                 var panorama = new google.maps.StreetViewPanorama(document.getElementById("GoogleStreetviewObject"), panoramaOptions);
22.             }
23.         });
24.     }
25. </script>

Much more simple code:

getPanoramaByLocation – returns status OK for coordinates that have Street View 50 (set in a parameter) meters from them.

Be sure though to place (line 20):

1. document.getElementById("GoogleStreetViewContainer").style.display = 'block';

Before calling StreetViewPanorama or you will get an “Out of stack space” error (I opened a bug on this but since the work around as fairly simple it probably won’t be fixed any time soon…).

One last warning the functionality is almost the same. The only difference I could find is that V3 hasn’t implemented Full Screen mode yet (unknown when it will be added or if it will) where V2 has it out of the box.

V2:

V3:

Seems almost the same…

 

Code sample can be found in my CodePlex Project, or directly here.

 

Edit (13/09/2011): Fixed Firefox bug in JavaScript

 

Keywords: Silverlight, Map, Google Street View, Google Map API

IceRocket Tags: Silverlight,Map,Google Street View,Google Map API