Google maps API v3 make overlay show on separate DOM element street-view

Question

Is there any way to make overlay (marker) to show when street-view (panorama) is displayed in DOM element other than map element?

Tried for hours and cannot make it function.

jsFiddle http://jsfiddle.net/o3a2rfgz/1/

var start_lat_long = {lat: 34.0330675, lng: -117.9679802};

function load_map() {

    var map = new google.maps.Map(document.getElementById('map'), {
        center: start_lat_long,
        zoom: 17,

        backgroundColor: "#b3d1ff",
        disableDoubleClickZoom: 1,
        keyboardShortcuts: 0,
        disableDefaultUI: 1,
        minZoom: 9
    });

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


    //PANORAMA INTERNAL
    panorama = map.getStreetView();
    panorama.setPosition(start_lat_long);


    //PANORAMA EXTERNAL
    var sv = new google.maps.StreetViewService();
    panorama_external = new google.maps.StreetViewPanorama(document.getElementById('pano'));
    sv.getPanorama({location: start_lat_long, radius: 100}, processSVData);

}


google.maps.event.addDomListener(window, 'load', load_map);


//PANORAMA INTERNAL
function toggleStreetView() {
    if (panorama.getVisible() == false) {
        panorama.setVisible(true);
    } else {
        panorama.setVisible(false);
    }
}


//PANORAMA EXTERNAL
function processSVData(data) {
    panorama_external.setPano(data.location.pano);
    panorama_external.setVisible(true);
}

Answer 1

You need to add a different marker to the second panorama:

//PANORAMA EXTERNAL
function processSVData(data) {
    panorama_external.setPano(data.location.pano);
    panorama_external.setVisible(true);
    var marker2 = new google.maps.Marker({
        position: start_lat_long,
        map: panorama_external
    });
}

updated fiddle

code snippet:

var start_lat_long = {
  lat: 34.0330675,
  lng: -117.9679802
};

function load_map() {

  var map = new google.maps.Map(document.getElementById('map'), {
    center: start_lat_long,
    zoom: 17,

    backgroundColor: "#b3d1ff",
    disableDoubleClickZoom: 1,
    keyboardShortcuts: 0,
    disableDefaultUI: 1,
    minZoom: 9
  });

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


  //PANORAMA INTERNAL
  panorama = map.getStreetView();
  panorama.setPosition(start_lat_long);


  //PANORAMA EXTERNAL
  var sv = new google.maps.StreetViewService();
  panorama_external = new google.maps.StreetViewPanorama(document.getElementById('pano'));
  sv.getPanorama({
    location: start_lat_long,
    radius: 100
  }, processSVData);

}


google.maps.event.addDomListener(window, 'load', load_map);


//PANORAMA INTERNAL
function toggleStreetView() {
  if (panorama.getVisible() == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}


//PANORAMA EXTERNAL
function processSVData(data) {
  panorama_external.setPano(data.location.pano);
  panorama_external.setVisible(true);
  var marker2 = new google.maps.Marker({
    position: start_lat_long,
    map: panorama_external
  });
}

<script src="https://maps.googleapis.com/maps/api/js?signed_in=true"></script>
<input type="button" value="Toggle Street View" onclick="toggleStreetView();" style="background:#0a0; color:#fff" />
<br />

<div id="map" style="width: 48%; height: 300px; display: inline-block;"></div>

<div id="pano" style="width:48%; height: 300px; display: inline-block;"></div>