如何使用 infowindow 数据填充侧边栏信息？

Question

我有一个功能齐全的 Google Maps V3 地图，可以正常工作。但是，我不喜欢 InfoWindows，因为它们在显示信息时占用了太多的地图空间。我的解决方案是将信息放在地图右侧的侧边栏中。 InfoWindow 内的信息将使用事件传输到该侧边栏中的 a，以首先清除现有数据，然后用当前数据重新填充它。

我不确定如何从地图内部获取数据并将其带到外部，也不知道如何使用内部事件通过“点击”将数据移动到外部。

  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("tests/cfdstationsxml.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 city = markers[i].getAttribute("city");
      var state = markers[i].getAttribute("state");
      var zip = markers[i].getAttribute("zip");
      var engine = markers[i].getAttribute("engine");
      var truck = markers[i].getAttribute("truck");
      var ambulance = markers[i].getAttribute("ambulance");
      var special_units = markers[i].getAttribute("special_units");
      var battalion = markers[i].getAttribute("battalion");
      var district = markers[i].getAttribute("district");
      var office = markers[i].getAttribute("office");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<div id='info' style='overflow:hidden;line-height:15px;color:black;height:200px;width:225px;'><span style='font-weight:500;text-decoration:underline;font-size:13px;'>" + name + "</span><br><span style='font-size:10px;'>" + address + "<br>" + city + ", " + state + " " + zip + "</span><br><table style='color:black;font-size:12;'><tr><td>Engine:</td><td>" + engine + "</td></tr><tr><td>Truck:</td><td>" + truck + "</td></tr><tr><td>Ambulance:</td><td>" + ambulance + "</td></tr><tr><td>Special Units:</td><td>" + special_units + "</td></tr><tr><td>Battalion:</td><td>" + battalion + "</td></tr><tr><td>District:</td><td>" + district + "</td><tr><td>Office:</td><td>" + office + "</td></tr></tr></table></div>";
      var icon = 'http://www.radioman911.com/images/9px_marker.png'; // anywhere from 3px_marker.png to 8px_marker.png
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon,
        title: name,
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}
function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    $("#info").appendTo("#sidebar");  
    //infoWindow.setContent(lmth);
    infoWindow.open(map, marker);
  });
}
function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };
  request.open('GET', url, true);
  request.send(null);
}
function doNothing() {}

任何帮助都将不胜感激 - 这已经让我发疯了一个月！！

提姆

Answer 1

这应该适用于 'id of your sidebar div' 的正确值；

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
   document.getElementById('id of your sidebar div').innerHTML = html;
  });
}

working example