Hi, I've had a go at this myself, and finally came up with a solution.
The first thing I did was to go into my template and create an override for JEA Property.
I then edited the "default_googlemap.php" file. From line 44 to the bottom, replace the script with this script:
$script = <<
function initMap(mapOptions, panoOptions, MarkerLatlng) {
map = new google.maps.Map(document.id('jea_property_map'), mapOptions);
var marker = new google.maps.Marker({
position: MarkerLatlng,
map: map,
title: '{$this->row->ref}'
});
var panorama = new google.maps.StreetViewPanorama(document.getElementById('jea_property_map_pano'), panoOptions);
map.setStreetView(panorama);
}
window.addEvent("domready", function(){
var longitude = {$longitude};
var latitude = {$latitude};
if (longitude && latitude) {
var myLatlng = new google.maps.LatLng(latitude, longitude);
var options = {
zoom : 15,
center : myLatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var panoramaOptions = {
position: myLatlng,
};
initMap(options, panoramaOptions, myLatlng);
} else {
var geocoder = new google.maps.Geocoder();
var opts = {'address':'$address', 'language':'$lang', 'region':'$region'};
geocoder.geocode(opts, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myLatlng = results[0].geometry.location;
var options = {
center : myLatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var panoramaOptions = {
position: myLatlng,
};
initMap(options, panoramaOptions, myLatlng);
map.fitBounds(results[0].geometry.viewport);
}
});
}
});
EOD;
$this->document->addScriptDeclaration($script);
?>
I've only modified the original code to add panoramaOptions variable, and pass it to the initMap function. I then added the panorama variable.
At the bottom I also added a div tag called "jea_property_map_pano", but you have to give it a height property otherwise you won't be able to see it. The street view loads up in this div tag.
