To use this library, create a ExtStreetviewControl object and add this control to the map with the GMap2.addControl() method:
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.014975, 135.782479), 17);
// add control
var extStreetviewControl = new ExtStreetviewControl();
map.addControl(extStreetviewControl);
You can set the control size which it specify into ExtStreetviewOptions.size.
var opts = {
size : new GSize(400, 400)
};
var extStreetviewControl = new ExtStreetviewControl(opts);
map.addControl(extStreetviewControl);
You can control the view of streetview.
var extStreetviewControl = null;
function initialize () {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(48.859862, 2.292024), 17);
var opts_ = {
pov : {yaw:500, pitch:-10, panoId:null}
};
extStreetviewControl = new ExtStreetviewControl(opts_);
map.addControl(extStreetviewControl);
}
}
function show_La_tour_Eiffel() {
var pos = new GLatLng(48.859862, 2.292024);
var pov = {
yaw : 500,
pitch : -10
};
extStreetviewControl.setLocationAndPOV(pos, pov);
}
View example (panoramaViewControl.html)
Control the controller's visibility, stauts and main content.
var extStreetviewControl;
function initialize () {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(48.859862, 2.292024), 17);
//add zoom controller
zoomCtrl = new GLargeMapControl();
map.addControl(zoomCtrl);
var opts = {
mainContent : "STREETVIEW",
controlStatus : "MINI"
};
extStreetviewControl = new ExtStreetviewControl(opts);
map.addControl(extStreetviewControl);
map.addOverlay(new GStreetviewOverlay());
}
}
function showMap() {
extStreetviewControl.setMainContent("MAP");
}
function swapMapAndStreetview() {
extStreetviewControl.setMainContent("MAP");
}
function minimizeControl() {
extStreetviewControl.setCtrlStauts("MINI");
}
function normalyControl() {
extStreetviewControl.setCtrlStauts("NORMAL");
}
function showControl() {
extStreetviewControl.show();
}
function hideControl() {
extStreetviewControl.hide();
}
You can get a handle of default marker using by the "getMarker" method.
var extStreetviewControl = null;
var ctrlMarker = null;
function initialize () {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(38.892096,-77.03651), 17);
//add the ExtStreetviewControl
var opts = {
size : new GSize(300, 300),
mainContent : "STREETVIEW"
};
extStreetviewControl = new ExtStreetviewControl(opts);
map.addControl(extStreetviewControl);
//get default marker's handle
ctrlMarker = extStreetviewControl.getMarker();
ctrlMarker.openInfoWindow("Near the White House in US");
GEvent.addListener(ctrlMarker, "click", onCtrlMarkerClick);
map.addOverlay(new GStreetviewOverlay());
}
}
function onCtrlMarkerClick (latlng) {
var txt = ctrlMarker.getLatLng() + "
";
var pov = extStreetviewControl.getPov();
txt += "yaw:" + pov.yaw + "
";
txt += "pitch:" + pov.pitch + "
";
txt += "zoom:" + pov.zoom;
ctrlMarker.openInfoWindowHtml(txt);
}