Google maps adding streetview to each infowindow

Question

I would like to add streetview to each infowindow but I can't figure out how to integrate the code. I tried putting the code where the comments are set and that works half. Still have to learn a lot about programming.

html += '<div id="content" style="width:200px;height:200px;"></div>';

var pano = null;
google.maps.event.addListener(infoWindow, 'domready', function () {
  if (pano != null) {
    pano.unbind("position");
    pano.setVisible(false);
  }         
  pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
                navigationControl: true,
                navigationControlOptions: { style: google.maps.NavigationControlStyle.ANDROID },
                enableCloseButton: false,
                addressControl: false,
                linksControl: false
  });
  pano.bindTo("point", marker);
  pano.setVisible(true);
});

I'm using this code:

function load() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: new google.maps.LatLng(41.640078, -102.669433),
    zoom: 3,
    mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;

downloadUrl("mymap.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b> <br/>" + point;

// comment *** streetview here ****

        var marker = new google.maps.Marker({
            map: map,
            position: point
        });
        bindInfoWindow(marker, map, infoWindow, html);
    }
});}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {

    infoWindow.setContent(html);
    infoWindow.open(map, marker);
 });
}

Answer 1

Working example using DOM elements (rather than using string content):

// this variable will collect the html which will eventually be placed in the side_bar 
var side_bar_html = "";

// arrays to hold copies of the markers used by the side_bar 
var gmarkers = [];

// global "map" variable
var map = null;

var sv = new google.maps.StreetViewService();
var clickedMarker = null;
var panorama = null;

// Create the shared infowindow with three DIV placeholders
// One for a text string, oned for the html content from the xml, one for the StreetView panorama.
var content = document.createElement("DIV");
var title = document.createElement("DIV");
content.appendChild(title);
var streetview = document.createElement("DIV");
streetview.style.width = "200px";
streetview.style.height = "200px";
content.appendChild(streetview);
var htmlContent = document.createElement("DIV");
content.appendChild(htmlContent);

var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50),
  content: content
});

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });
  marker.myHtml = html;


  google.maps.event.addListener(marker, "click", function() {
    clickedMarker = marker;
    sv.getPanoramaByLocation(marker.getPosition(), 50, processSVData);
    // openInfoWindow(marker);
  });
  // save the info we need to use later for the side_bar
  gmarkers.push(marker);
  // add a line to the side_bar html
  side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var marker = clickedMarker;
    openInfoWindow(clickedMarker);

    if (!!panorama && !!panorama.setPano) {

      panorama.setPano(data.location.pano);
      panorama.setPov({
        heading: 270,
        pitch: 0,
        zoom: 1
      });
      panorama.setVisible(true);

      google.maps.event.addListener(marker, 'click', function() {

        var markerPanoID = data.location.pano;
        // Set the Pano to use the passed panoID
        panorama.setPano(markerPanoID);
        panorama.setPov({
          heading: 270,
          pitch: 0,
          zoom: 1
        });
        panorama.setVisible(true);
      });
    }
  } else {
    openInfoWindow(clickedMarker);
    title.innerHTML = clickedMarker.getTitle() + "<br>Street View data not found for this location";
    htmlContent.innerHTML = clickedMarker.myHtml;
    panorama.setVisible(false);
    // alert("Street View data not found for this location.");
  }
}

function initialize() {

  // Create the map 
  // No need to specify zoom and center as we fit the map further down.
  map = new google.maps.Map(document.getElementById("map_canvas"), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  });


  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  // Read the data from example.xml
  // downloadUrl("example.xml", function(doc) {
  var xmlDoc = xmlParse(xmlData);
  var markers = xmlDoc.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    // obtain the attribues of each marker
    var lat = parseFloat(markers[i].getAttribute("lat"));
    var lng = parseFloat(markers[i].getAttribute("lng"));
    var point = new google.maps.LatLng(lat, lng);
    var html = markers[i].getAttribute("html");
    var label = markers[i].getAttribute("label");
    // create the marker
    var marker = createMarker(point, label, html);
    bounds.extend(point);

  }
  // put the assembled side_bar_html contents into the side_bar div
  document.getElementById("side_bar").innerHTML = side_bar_html;
  // Zoom and center the map to fit the markers
  map.fitBounds(bounds);
  // });
}


// Handle the DOM ready event to create the StreetView panorama
// as it can only be created once the DIV inside the infowindow is loaded in the DOM.
var pin = new google.maps.MVCObject();
google.maps.event.addListenerOnce(infowindow, "domready", function() {
  panorama = new google.maps.StreetViewPanorama(streetview, {
    navigationControl: false,
    enableCloseButton: false,
    addressControl: false,
    linksControl: false,
    visible: true
  });
  panorama.bindTo("position", pin);
});

// Set the infowindow content and display it on marker click.
// Use a 'pin' MVCObject as the order of the domready and marker click events is not garanteed.
function openInfoWindow(marker) {
    title.innerHTML = marker.getTitle();
    htmlContent.innerHTML = marker.myHtml;
    pin.set("position", marker.getPosition());
    infowindow.open(map, marker);
  }
  // This Javascript is based on code provided by the
  // Community Church Javascript Team
  // http://www.bisphamchurch.org.uk/   
  // http://econym.org.uk/gmap/
  // from the v2 tutorial page at:
  // http://econym.org.uk/gmap/basic3.htm
google.maps.event.addDomListener(window, 'load', initialize);

var xmlData = '<markers> <marker lat="43.65654" lng="-79.90138" html="Some stuff to display in the&lt;br&gt;First Info Window"  label="Marker One" /> <marker lat="43.91892" lng="-78.89231" html="Some stuff to display in the&lt;br&gt;Second Info Window" label="Marker Two" /> <marker lat="43.82589" lng="-79.10040" html="Some stuff to display in the&lt;br&gt;Third Info Window"  label="Marker Three" /></markers> ';

/**
 * Parses the given XML string and returns the parsed document in a
 * DOM data structure. This function will return an empty DOM node if
 * XML parsing is not supported in this browser.
 * @param {string} str XML string.
 * @return {Element|Document} DOM.
 */
function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

html,
body {
  height: 100%;
}

<script src="https://maps.google.com/maps/api/js"></script>
<!-- you can use tables or divs for the overall layout -->
<table border="1">
  <tr>
    <td>
      <div id="map_canvas" style="width: 550px; height: 450px"></div>
    </td>
    <td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">
      <div id="side_bar"></div>
    </td>
  </tr>
</table>