Google Maps with Street View

INTRODUCTION
In this article I will show you to implement google street view in your google application.

EXAMPLE
I will show you the google street view example taking into consideration that user has basic knowledge of implementing google maps. To get the basic knowledge of implementing google maps refer to my article “Locate directions using Gmaps”. You can access the article from the following link.

To start we will first implement basic google map in our application. It will look something as below.

streetview

Step1:-
The following is the HTML code for implementing google maps.

html

Step2:-
The following is the JavaScript code for implementing google maps and street view in google maps.

var map = null;
var geocoder = null;
function load()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById(“map”));
var plt = new GLatLng(19.0170, 72.8576);
map.setCenter(plt, 12);
map.addControl(new GLargeMapControl3D());
map.setMapType(G_HYBRID_MAP);
}
}

The above code implements the basic google map in our application.

function GetstreetView(add) {
var geoc = new GClientGeocoder();
geoc.getLatLng(add,
function(point) {
if (!point) {
alert(add + ” not found”);
} else {
var Gsview = new GStreetviewClient();
Gsview.getNearestPanorama(point,
function(panodata) {
if (panodata.code != 200) {
alert(“Street View is not available for this location”);
return;
}
var latlng = { latlng: point };
var pno = new GStreetviewPanorama(document.getElementById(“map”), latlng);
});
}
});
}

function showstreetview() {
var addr = document.getElementById(‘addr’);
GetstreetView(addr.value);
}

function handleNoFlash(errorCode) {
if (errorCode == 600) {
alert(“Street View is not available for this location”);
return;
}
if (errorCode == 603) {
alert(“Flash support is required.”);
return;
}
}

The above code is used to implement street view in our application. The function showstreetview() is called on the click event of button which will render the google street view as shown below.

protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes.Add(“onclick”, “javascript:showstreetview();”);
}

The  google street view will look something like this.

streetview1

You can download the demo project from the following link.

3 comments

Leave a comment