Google Maps API V3 custom controls position

Question

I've read docs about positioning controls on the map(TOP, TOP_LEFT, etc), but Is there any way to make custom position? For example: left: 20px; top: 200px; I just want to have in top_left corner my logo and zoom control right under logo. And how to remove pan control in navigation controls? I want to have only zoom control in default style(not minimized). Thank you.

Answer 1

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/