Google Maps API V3 custom controls position

Although the question is rather old, with almost 3k views it still seems to draw interest – So, here is my solution:

Wrap the controls!

First we have to find the container-element, where Google puts the control. This depends on which controls we want to use on the map. Google doesn’t use unique ids for those containers. But all the controls have the class “gmnoprint” in common. So just counting the elements with “gmnoprint” does the job. Say we only want to use the “ZoomControlStyle.SMALL”-control. It’s always the last element with “gmnoprint”.

Now, we can simply style the element – Right? No. As soon as you zoom or resize the map, Google resets the styling of the controls. Bad luck, but: We can wrap a container around the controls and style this container!

Using jQuery, this is a really simple task:

$('div.gmnoprint').last().parent().wrap('<div id="newPos" />');

We only have to make sure, the control is fully loaded by the time we try to wrap it. It’s not totally bulletproof I guess, but using the MapsEventListener “tilesloaded” does a pretty good job:

google.maps.event.addDomListener(map, 'tilesloaded', function(){
    // We only want to wrap once!
    if($('#newPos').length==0){
        $('div.gmnoprint').last().parent().wrap('<div id="newPos" />');
    }
});

Check out http://jsfiddle.net/jfPZH/ (not working, see Update Feb 2016)

Of course if you don’t like the initial flicker and want a more reliable version you can do all kinds of improvements like fadeIn etc: http://jsfiddle.net/vVLWg/ (not working, see Update Feb 2016)

So, I hope some of you will find this useful – Have fun!

Update: With this method you can position any other control (e.g. the controls of the Drawing Library) as well. You just have to make sure to select the right container! This is a modified example: http://jsfiddle.net/jP65p/1/ (somehow still working)

Update: As of Feb 2016 Google seems to have changed the positioning of the map controls. This does not break my solution. It just needs some adjustment. So here are the updated fiddles:

Simple: http://jsfiddle.net/hbnrqqoz/
Fancy: http://jsfiddle.net/2Luk68w5/