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); }