复制Google地图叠加面板/图例

Question

谷歌地图javascript API有一个非常好的图例/面板，可根据点击/触摸事件更新地图的中间点。在他们的文档中没有任何地方详细介绍如何创建这种风格的图例/叠加层。

**请在投票前查看我试图复制的示例，谢谢！

以下是我要复制的面板的链接：https://developers.google.com/maps/documentation/javascript/

（右上角的“基本地图”面板）

这是唯一的方法吗？用content.push打印每一行？看起来很脏。

var legend = document.createElement('div');
    legend.id = 'legend';
    var content = [];
    content.push('<h3>Butterflies*</h3>');
    content.push('<p><div class="color red"></div>Battus</p>');
    content.push('<p><div class="color yellow"></div>Speyeria</p>');
    content.push('<p><div class="color green"></div>Papilio</p>');
    content.push('<p><div class="color blue"></div>Limenitis</p>');
    content.push('<p><div class="color purple"></div>Myscelia</p>');
    content.push('<p>*Data is fictional</p>');
    legend.innerHTML = content.join('');
    legend.index = 1;
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);