Thursday, July 7, 2011

Embedding a User Editable Google Maps and Street View Control in a Website

We recently added a feature allowing our users to show the Google Street View of their property on our website and there wasn't a lot of documentation about how to do it.  Ideally we wanted to be able to display the street view of a real estate listing so prospective buyers could get a better feel for the property and the surrounding area, and it seemed like a solveable problem.

The final solution ended up looking like this:

In order to accomplish this we needed to do several things.  First, we already know the address of the property that is being entered because as a real estate listing site that is something users enter with their listing info.  Therefore we simply need to use the google maps and google street view API to display the map and street view version to our users so they can confirm the location and angle of the view.  Once they have done this we store the POV information and the location of the property (in case the google approximation is incorrect) in our database to ensure we display the correct info.

Step 1) Display the approximate location for the street view and map controls and allow the user to adjust the view to their liking

[code]
var map1;
var panoramaOptions;
var myPano;
var point;
var point1;
var marker1;

/*********************************************************/
//Use the validate form code to set hidden textboxes to the values
//from the streetview Pano, so when the form gets submitted the
//values get passed to the server to be saved
/*********************************************************/
function validateForm(){
this.document.getElementById('pitch').value = myPano.getPov().pitch;
this.document.getElementById('heading').value = myPano.getPov().heading;
this.document.getElementById('svzoom').value = myPano.getPov().zoom;
this.document.getElementById('sv_latitude').value = myPano.getPosition().lat();
this.document.getElementById('sv_longitude').value = myPano.getPosition().lng();
this.document.getElementById('latitude').value = map.getPosition().lat();
this.document.getElementById('longitude').value = map.getPosition().lng();
return true;
}

function load() {
//set the point for the panoramic
//at this point we don't know the POV info so we set them all
//to 0, the user will have to adjust the POV and we will save
//that information
point = new google.maps.LatLng(66.6666, 66.6666);
panoramaOptions =
{
position:point,
pov: {
heading: 0,
pitch:0,
zoom:0
}
};
/*********************************************************/
//use a div with elementid pano to display the streetview panorama
/*********************************************************/
myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
myPano.setVisible(true);


var sv = new google.maps.StreetViewService();
var availability_cb = function(data, status) {
/*********************************************************/
//if the streetview service can't display teh location (due to lack of data)
//then we use a bunch of hidden fields to display an error message
//apologizing for the inability to use streetview
/*********************************************************/
if (status !== 'OK')
{
document.getElementById('sv_enabled').checked = true;
document.getElementById('pano').style.display='none';
document.getElementById('pano').style.visibility='hidden';
document.getElementById('panotext').style.display='none';
document.getElementById('panotext').style.visibility='hidden';
document.getElementById('panoerror').style.display='';
document.getElementById('panoerror').style.visibility='';
}
/*********************************************************/
//show the panoramic
/*********************************************************/
else
{
myPano.setVisible(true);
}
}

sv.getPanoramaByLocation(myPano.getPosition(),50,availability_cb);

/*********************************************************/
//this code displays the normal streetview map and allows
//the user to drag the pushpin to set the proper location
//in the event the google provided position isn't quite accurate
//this map gets put in a div with the id map
/*********************************************************/
map1 = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(66.6666, 66.6666),
zoom: 15,
mapTypeId: 'roadmap'
});

point1 = new google.maps.LatLng(
parseFloat(66.6666),
parseFloat(66.6666));

marker1 = new google.maps.Marker({
map: map1,
position: point1,
draggable: true
});
}


[/code]
All of the preceding code creates the following layout in the website:


Step 2) We store the information from the streetview and normal map in our database, that way when we display the listing to users they get the previously-set location.

Step 3) We display the street view control and the normal roadmap view on our site.
[code]
var map1;
var panoramaOptions;
var myPano;
var point;


function load() {
/*********************************************************/
//Set up the street view position
/*********************************************************/
point = new google.maps.LatLng(66.6666, 66.6666);
panoramaOptions =
{
position:point,
pov: {
heading: 61.4137, //This is the custom POV that was set
pitch:9.02999, //by the user
zoom:0
}
};

/*********************************************************/
//use the same divs as before, pano for streetview and map
//for the roadmap.
/*********************************************************/
myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
myPano.setVisible(true);




/*********************************************************/
//set up the roadmap
/*********************************************************/
map1 = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(66.6666, 66.6666),
zoom: 15,
mapTypeId: 'roadmap'
});
var point1 = new google.maps.LatLng(
parseFloat(66.6666),
parseFloat(66.6666));

var marker1 = new google.maps.Marker({
map: map1,
position: point1
});

}

[/code]

Wrap Up
And once again this creates the final picture:
I've left out some things like storing the POV info in my database as well as how to convert an address in to a Lat/Lng via the google maps API so you'll have to read the API's to figure out how to do that.  This should help you a bit with the street view functionality :)
If you'd like to see it in action this code is what currently drives the street view and property map functionality of all the Commercial Real Estate Listings at www.cimls.com 

No comments:

Post a Comment