我已经搜索了很多关于为Google Maps Api v3创建自定义控件的搜索,我发现其他人使用它作为
Google documentation.
他们创建div并使用JS来设计它,我认为这不是一个好习惯.
我认为这违反了关注点的分离设计原则我的意思是,在JS或HTML中编写CSS代码. @H_403_5@除了最佳实践问题,我已尝试从上面的链接中的代码示例,但它不起作用它引发了以下错误：

( **Uncaught TypeError: Cannot read property 'zIndex' of undefined** ) ..

@H_403_5@这是放置[缩放]按钮的代码.

@H_403_5@HTML文件

<div id="control-div" class="control-div">
  <div id= "control-ui" class="control-ui" title = "Click to set the map to Home">
    <div id="control-text" class="control-text">
      <p> Zoom </p>
    </div>
  </div>
</div>

@H_403_5@CSS文件

.control-ui{
  background-color: white;
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
  text-align: center;
  width: 90px;
  height: 30px;
}
.control-text{
  front-family: Arial,sans-serif;
  font-size: 12px;
  padding: 4px 4px;
}

@H_403_5@JS文件(谷歌地图初始化程序)

var controlDiv =$("#control-div");
  var controlUI = $("#control-ui");
  var controlText = $("#control-text");
  controlUI.click(function() {
    map.setZoom(11);
  });
  controlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv[0]);