ExtStreetviewControl Examples

To use this library, create a ExtStreetviewControl object and add this control to the map with the GMap2.addControl() method:

Basic Example

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

View example (basic.html)

Set control size

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

View example (setSize.html)

Change location and point of view

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

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

View example (control.html)

Get default marker

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

View example (markerClick.html)