Javascript 如何在div中显示来自google标记的信息？

我想点击一个地图标记，它会在一个div中显示地图下方的信息。下面是我的代码。始终显示相同的div，如何处理每个标记？。 徖

.html

---

使用标记中的一些数据更改div的内容，例如标题：

google.maps.event.addListener(marker, "click", function() {
  $('#test').text(this.getTitle())
  $('#test').css('display', 'block');
  $(".dropdown").removeClass("is-expanded");
  var target = $('#test');
  $('html,body').animate({
    scrollTop: target.offset().top
  }, 1000);
  return false;
});

代码片段：

var映射；
var brooklyn=newgoogle.maps.LatLng（-33.9151.2）；
var MY_MAPTYPE_ID='custom_style'；
函数初始化（）{
变量特性选项=[{
样式：[{
色调：“#890000”
}, {
可见性：“简化”
}, {
伽马：0.5
}, {
重量：0.5
}]
}, {
elementType:'标签'，
样式：[{
能见度：“关闭”
}]
}, {
功能类型：“水”，
样式：[{
颜色：“#890000”
}]
}];
变量映射选项={
缩放：12，
中心：布鲁克林，
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP，我的地图类型]
},
mapTypeId:MY_MAPTYPE_ID
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
var styledMapOptions={
名称：“自定义样式”
};
var customMapType=new google.maps.StyledMapType（featureOpts，styledMapOptions）；
map.mapTypes.set（MY\u MAPTYPE\u ID，customMapType）；
设置标记（地图、海滩）；
}
var gmarkers=[]；
var海滩=[
[Bondi Beach'，-33.890542151.274856，4]，
[Coogee Beach'，-33.923036151.259052,5]，
[Cronulla Beach'，-34.028249151.157507,3]，
[‘曼利海滩’，-33.80010128657071151.28747820854187，2]，
[‘马鲁布拉海滩’，-33.950198151.259302，1]
];
功能设置标记（地图、位置）{
对于（变量i=0；i
html，
身体，
#地图画布{
身高：80%；
宽度：100%；
边际：0px；
填充：0px
}
#试验{
显示：无；
}

测试
由于在代码加载后加载了google API，您的代码似乎出现了错误。您能修复这些问题，以便我们有一个最小的、完整的、可验证的示例吗？对不起，我会把完整的代码。
var map;
var brooklyn = new google.maps.LatLng(-33.9, 151.2);

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

  var featureOpts = [
    {
      stylers: [
        { hue: '#890000' },
        { visibility: 'simplified' },
        { gamma: 0.5 },
        { weight: 0.5 }
      ]
    },
    {
      elementType: 'labels',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'water',
      stylers: [
        { color: '#890000' }
      ]
    }
  ];

  var mapOptions = {
    zoom: 12,
    center: brooklyn,
    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);

  setMarkers(map, beaches);

}

  var gmarkers = [];

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: beach[0],
        zIndex: beach[3]
    });
    gmarkers.push(marker);
        google.maps.event.addListener(marker, "click", function () {
            $('#test').css('display', 'block');
                    $(".dropdown").removeClass("is-expanded");
                    var target = $('#test');
                    $('html,body').animate({
                            scrollTop: target.offset().top
                        }, 1000);
                    return false;
        });
  }
}


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

html, body, #map-canvas {
        height: 90%;
        margin: 0px;
        padding: 0px
      }
#test{
  display:none;
}

google.maps.event.addListener(marker, "click", function() {
  $('#test').text(this.getTitle())
  $('#test').css('display', 'block');
  $(".dropdown").removeClass("is-expanded");
  var target = $('#test');
  $('html,body').animate({
    scrollTop: target.offset().top
  }, 1000);
  return false;
});