Best Practice for custom control of Google Maps API v3

Question

I've searched a lot about creating a custom control for Google Maps Api v3, and I found others use it as Google documentation. They create the divs and style it using JS, which I think is not a good practice. I think this violates the separation of concerns design principle I mean, writing CSS code inside JS or HTML.

Apart from the best practise question, I've tried their code examples from the above link, but it doesn't work it raised the following error:

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

Here is the code for putting [Zoom] button.

HTML file

  <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>

CSS file

.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;
}

JS file (Google map initializer)

  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);

Answer 1

A control is expected to be a DOMNode, but you supply a jQuery-object.

This should work:

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