Question

I know there a fixed position for the zoomControl, but they are not enough for where I need to put it.

Can I style it with CSS? Such as top:80px; right:20px;

Answer 1

Yes you can do it with jQuery. If you see the HTML source for the map generated, it can be observed that the various controls the map provides don’t have a ID attribute to manipulate them. However we can use the title attribute of each element to modify them as per our need. See this solution where in a click on the map div adds a top:50px to the bar in zoom control –

**DEMO

jQuery-

$("div[title='Click to zoom']").css("top","50px");
        });

Similarly you can capture other controls in the map and add css to them as per your need.

One point to note here is that you can’t us the $(document).ready() to change the css on page load since the map actually takes time to load and by then the zoom bar isn’t in the DOM. So I used a map click event to add the css. You can use other events to manipulate the css of the zoom control or other controls.