CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
markzzz
markzzz

Reputation: 47995

Can zoomControl ControlPosition be defined with CSS?

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;

Upvotes: 0

Views: 92

Answers (1)

Shiridish
Shiridish

Reputation: 4962

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.

Upvotes: 1

Related Questions