c#google-maps bing-maps latitude-longitude google-street-view

Google Streetview or Bing streetside URL's using Latitude and Longitude

I have latitude and longitude co-ordinates and have been trying to open either Google streetview or Bing streetside in a web browser instance.

I have managed to do this using Google street view url below, however I have found that if the coordinates are not exactly on a road it does not work. Instead, you get a map of the whole world.

string.Format(
    "http://maps.google.com/?cbll={0},{1}&cbp=12,0,0,0,5&layer=c",
    this.Location.Latitude,
    this.Location.Longitude)

The co-ordinates I want to use are in London so it's pretty much all mapped. I'd like to get the nearest street location to appear.

Solution

What I've done in the past is something like this. I check the StreetViewService has a 'Panorama' within 50 metres of the given location. Here's some full sample JS code which should work as is.

<!DOCTYPE html>
<html>
<head>
<title>Streetview</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#streetView { height: 100%; width: 100%; }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript">

    function createStreetMap(strMapCanvasID, intLat, intLong)
    {
        //create a google latLng object
        var streetViewLocation = new google.maps.LatLng(intLat,intLong);
        var panorama;

        //once the document is loaded, see if google has a streetview image within 50 meters of the given location, and load that panorama
        var sv = new google.maps.StreetViewService();

        sv.getPanoramaByLocation(streetViewLocation, 50, function(data, status) {
            if (status == 'OK') {
                //google has a streetview image for this location, so attach it to the streetview div
                var panoramaOptions = {
                    pano: data.location.pano,
                    addressControl: false,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.SMALL
                    }
                }; 
                var panorama = new google.maps.StreetViewPanorama(document.getElementById(strMapCanvasID), panoramaOptions);
            }
            else{
                //no google streetview image for this location, so hide the streetview div
                $('#' + strMapCanvasID).parent().hide();
            }
        });

        return panorama;
    }

    $(document).ready(function() {
        var myPano = createStreetMap('streetView', 51.513016, -0.144424);
    });
</script>

</head>
<body>
<div>
    <h2>Street View</h2>
    <div id="streetView"></div>
</div>
</body>
</html>

And then I only call this function once the DOM has loaded (otherwise I found errors if trying to do it too soon from within an initialize function).

$(document).ready(function() {
    var myPano = createStreetMap('streetView', someLatitude, someLongitude);
});

I believe in C# instead of using the call to createStreetMap from within $(document).ready(function() { ... }); you would use the WebBrowser.InvokeScript method and do something like this:

object[] args = {"streetView",51.513016,-0.144424};
webBrowser1.Document.InvokeScript("createStreetMap",args);