将单个infowindows分配给单个标记，从div调用内容

Question

我正在制作自定义Google地图。我有多个标记与自定义infowindows（一切正常，包裹在div和样式）。我设法将侧边栏菜单中的链接分配给标记，以便在单击菜单项时打开信息窗口。问题是，它始终是相同的infowindow。我可能已经完成了关于这个主题的每一个问题和答案，但我不能让这个工作......

地图，标记，信息窗口的代码是：

var map;
var markers = [];
var content = [];
var map = new google.maps.LatLng(46.2171749, 7.5984075);     

var MY_MAPTYPE_ID = 'custom_style';
function initialize() {

var featureOpts = [ 
{ 
"featureType": "landscape.natural.landcover", 
"elementType": "geometry.fill", 
"stylers": [ 
   { "visibility": "on" }, 
   { "color": "#f2f9f4" } 
    ] 
  }, // and so on with the styling

var mapOptions = {
zoom: 10,
center: map,
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};

map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

var styledMapOptions = {
name: 'Custom Style'
};

var customMapType = new google.maps.StyledMapType(featureOpts,styledMapOptions);

map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

var locations = [
        ['Location 1', 46.096678, 7.2281081, 'pin.png', 1],
        ['Location 2', 46.0230159, 7.7428676, 'pin.png', 2],
        ['Location 3', 46.1125509, 7.919948, 'pin.png', 3],
    ];

   var infobox = new InfoBox({
     content: document.getElementById("infobox"),
     disableAutoPan: false,
     maxWidth: 800,
     pixelOffset: new google.maps.Size(-400, 10),
     zIndex: null,
     closeBoxMargin: "12px 12px 2px 2px",
     closeBoxURL: "icon-close.png",
     infoBoxClearance: new google.maps.Size(0, 0),
});

    var marker, i;
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: locations[i][3]
        });

        markers.push(marker);

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infobox.open(map, marker);
               /* infowindow.setContent(locations[i][0]); //enabling this line disables correct map panning!! */
                map.panTo(marker.getPosition(0, 427));
                map.panBy(0, 400);
            }
        })(marker, i));
    }
}

function myClick(id){
        google.maps.event.trigger(markers[id], 'click');
    }

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

infowindows的内容在html中，如下所示：

<div id="Location 1">
<div id="infobox_wrapper">    
<div id="infobox">
<div id="infobox_title_wrapper">
<div id="info_icon">
<img src="green_s.png"/>
</div>
<div id="info_title"><p>##</p>
</div>
<div id="info_place"><p>##</p>
</div>
</div>
<iframe width="800" height="450" src="##" frameborder="0" allowfullscreen></iframe>
<p class= "txt">##</p>
</div>
</div>
</div>

有没有人有解决方案让这个工作？是否有任何简单的方法来为每个标记调用infowindow内容，例如来自var locations = []数组，意味着当添加位置，并在那里指定div或其他id时，标记以及相应的infowindow被放置在地图上？另外，一个侧面问题，行infowindow.setContent（locations [i] [0]）;禁用正确平移地图到标记... 感谢

Answer 1

你需要：

1. 任何html元素的唯一ID
2. DOM中所有不同标记的内容
3. 您无法在.setContent上致电infowindow，除非您已对其进行了定义（我怀疑应为infobox）
4. 您需要在节点显示时克隆节点，或者在信息框关闭时销毁它。

proof of concept fiddle

代码段

＆＃13;
＆＃13;
var map;
var markers = [];
var content = [];
var map = new google.maps.LatLng(46.2171749, 7.5984075);
var bounds = new google.maps.LatLngBounds();

function initialize() {

  var mapOptions = {
    zoom: 10,
    center: map
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var locations = [
    ['Location1', 46.096678, 7.2281081, 'pin.png', 1],
    ['Location2', 46.0230159, 7.7428676, 'pin.png', 2],
    ['Location3', 46.1125509, 7.919948, 'pin.png', 3],
  ];

  var infobox = new InfoBox({
    content: document.getElementById("infobox"),
    disableAutoPan: false,
    maxWidth: 800,
    pixelOffset: new google.maps.Size(-400, 10),
    zIndex: null,
    closeBoxMargin: "12px 12px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(0, 0),
  });

  var marker, i;
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      // icon: locations[i][3]
    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infobox.open(map, marker);
        infobox.setContent(document.getElementById(locations[i][0]).cloneNode(true));
        map.panTo(marker.getPosition(0, 427));
        map.panBy(0, 400);
      }
    })(marker, i));
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}

function myClick(id) {
  google.maps.event.trigger(markers[id], 'click');
}

google.maps.event.addDomListener(window, 'load', initialize);
＆＃13;
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.infowindow {
  border: 1px solid black;
  margin-top: 8px;
  background: white;
  padding: 5px;
}
＆＃13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map-canvas"></div>
<div id="Location1">
  <div class="infobox_wrapper">
    <div class="infowindow">
      <div class="infobox_title_wrapper">
        <div class="info_icon">
          <img src="https://www.google.com/drive/images/drive/logo-drive.png" height="20" />
        </div>
        <div class="info_title">
          <p>##</p>
        </div>
        <div class="info_place">
          <p>##</p>
        </div>
      </div>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193571.43828905202!2d-74.11808638273646!3d40.7058253631455!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1461436300347"
      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      <p class="txt">##</p>
    </div>
  </div>
</div>

<div id="Location2">
  <div class="infobox_wrapper">
    <div class="infowindow">
      <div class="infobox_title_wrapper">
        <div class="info_icon">
          <img src="https://www.google.com/drive/images/drive/logo-drive.png" height="20" />
        </div>
        <div class="info_title">
          <p>##</p>
        </div>
        <div class="info_place">
          <p>##</p>
        </div>
      </div>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d88704.87577364442!2d7.671905434077621!3d45.990682827318246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478f35a2292ee5cd%3A0x400ff8840196f70!2s3920+Zermatt%2C+Switzerland!5e0!3m2!1sen!2sus!4v1461437058426"
      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      <p class="txt">##</p>
    </div>
  </div>
</div>

<div id="Location3">
  <div class="infobox_wrapper">
    <div class="infowindow">
      <div class="infobox_title_wrapper">
        <div class="info_icon">
          <img src="https://www.google.com/drive/images/drive/logo-drive.png" height="20" />
        </div>
        <div class="info_title">
          <p>##</p>
        </div>
        <div class="info_place">
          <p>##</p>
        </div>
      </div>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44233.88369647231!2d7.936860760323751!3d46.13844402760392!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478f45103f606a5d%3A0xb47592074f679662!2s3910+Saas-Grund%2C+Switzerland!5e0!3m2!1sen!2sus!4v1461437405679"
      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      <p class="txt">##</p>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;