Javascript 刷新谷歌地图控件

在我的谷歌地图中，我添加了一个显示缩放级别的控件。但它并没有更新值。我正在使用map.getZoom（）函数

var divRef = document.createElement('div');
var ref = document.createElement("div");
ref.setAttribute("id", "ref");
divRef.appendChild(ref);

var controlText1 = document.createElement('div');
controlText1.className = "zoom";
var label1 = document.createElement('LABEL');

var t = document.createTextNode("zoom level ");
label1.setAttribute = ("for", "zoom");
label1.appendChild(t);
controlText1.appendChild(label1);
ref.appendChild(controlText1);
var tzoom = document.createTextNode(map.getZoom());
controlText1.appendChild(tzoom);
ref.appendChild(controlText1);

map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(divRef);

当第一次加载地图时，它会正确显示缩放级别控制，但如果使用按钮滚动以更改缩放，则该值不会更新。 如何刷新控件？或者我应该以不同的方式设置此控件

这是左下角的一把小提琴。当我缩小时，该值不会更新

---

使用“zoom\u changed”事件侦听器更新控件的内容：

google.maps.event.addListener(map, 'zoom_changed', function() {
  tzoom.textContent = map.getZoom();
});

代码片段：

var映射；
var芝加哥={
拉脱维亚：41.85，
液化天然气：-87.65
};
功能中心控制（controlDiv，地图）{
var divRef=document.createElement（'div'）；
var ref=document.createElement（“div”）；
ref.setAttribute（“id”、“ref”）；
divRef.appendChild（ref）；
var controlText1=document.createElement（'div'）；
controlText1.className=“缩放”；
var label1=document.createElement（'LABEL'）；
controlText1.style.color='红色'；
controlText1.style.fontFamily='Roboto，Arial，无衬线'；
controlText1.style.fontSize='16px'；
controlText1.style.lineHeight='38px'；
controlText1.style.paddingLeft='5px'；
controlText1.style.paddingRight='5px'；
controlText1.style.backgroundColor='#fff'；
controlText1.style.border='2px solid#fff'；
controlText1.style.borderRadius='3px'；
controlText1.style.boxShadow='0 2px 6px rgba（0,0,0,3）'；
var t=document.createTextNode（“缩放级别”）；
label1.setAttribute=（“用于”、“缩放”）；
标签1.附属物（t）；
controlText1.appendChild（label1）；
参考附录1（控制文本1）；
var tzoom=document.createTextNode（map.getZoom（））；
controlText1.appendChild（tzoom）；
google.maps.event.addListener（映射'zoom_changed'，函数（）{
tzoom.textContent=map.getZoom（）；
})
参考附录1（控制文本1）；
控件[google.maps.ControlPosition.LEFT_BOTTOM].push（divRef）；
var controlUI=document.createElement（'div'）；
controlUI.style.backgroundColor='#fff'；
controlUI.style.border='2px solid#fff'；
controlUI.style.borderRadius='3px'；
controlUI.style.boxShadow='0 2px 6px rgba（0,0,0,3）'；
controlUI.style.cursor='pointer'；
controlUI.style.marginBottom='22px'；
controlUI.style.textAlign='center'；
controlUI.title='单击以重新居中地图'；
controlDiv.appendChild（controlUI）；//为控件内部设置CSS。
var controlText=document.createElement（'div'）；
controlText.style.color='rgb（25,25,25）'；
controlText.style.fontFamily='Roboto，Arial，无衬线'；
controlText.style.fontSize='16px'；
controlText.style.lineHeight='38px'；
controlText.style.paddingLeft='5px'；
controlText.style.paddingRight='5px'；
controlText.innerHTML='中心地图'；
appendChild（controlText）；//设置单击事件侦听器：只需将映射设置为Chicago即可。
controlUI.addEventListener（'单击'，函数（））{
赛特中心地图（芝加哥）；
});
}
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
中心：芝加哥
});
var centerControlDiv=document.createElement（'div'）；
var centerControl=新的centerControl（centerControlDiv，map）；
centerControlDiv.index=1；
map.controls[google.maps.ControlPosition.TOP\u CENTER].push（centerControlDiv）；
}

html，
身体，
#地图{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}

---

请提供一份说明您的问题的报告。我在发布的代码

uncaughtreferenceerror:ref未定义时遇到一个javascript错误，因为它位于我添加的另一个div中