Google Maps v3 default controls position offset

Question

I want the Google Maps v3 default controls position to be 'top,left' but i want it to be left 300px. I haven't found how to do this with the API, is there? I think I may just need to grab the div and make it with raw javascript/jQuery.

Thanks in advance!

Answer 1

There's a much simpler solution. I got the idea from the description of the following feature request Allow exact control position using pixels (for which you can vote for). Here's the implementation:

JavaScript:

var emptyDiv = document.createElement('div');
emptyDiv.className = 'empty';
emptyDiv.index = 0;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(emptyDiv);

CSS:

.empty {
    width: 300px;
}

And here's a JSFiddle of it.

Answer 2

It may not be ideal but the way I fixed this was with jQuery.

Here I am grabbing the control div wrapper which has nothing unique about it by grabbing a unique element in the DOM and bubbling back to the main controller div. I then wrap it with a custom div whose reference is saved for use later. Initially I just moved the control div wrapper but it moved back to left: 0 on hover. Wrapping it with a custom div and offsetting that works great and the new div wrap can be used later.

var $controls = {}, _loaded = false;
// define the control wrapper for use later, map hasn't loaded yet

google.maps.event.addListener(map, 'idle', function(event) {
// map is idle

    if(!_loaded){ _loaded = true;
    // only runs on first idle

        var control_move = setInterval(function(){
        // look for loaded controller

            var img = 'img[src="http://maps.gstatic.com/mapfiles/mapcontrols3d7.png"]';

            if($(img).size() == 5){
            // loaded controller found

                clearInterval(control_move);
                // stop looking for loaded controller

                $(img+':first').parent().parent().parent().parent()
                    .wrap('<div id="control-offset" style="position: absolute; left: 300px; top: 0; width: 78px; height: 340px; overflow: hidden; z-index: 1000;"/>');
                $controls = $('#control-offset');
                // I wrap the controller wrap and offset that so it doesn't jump around

            }

        }, 100);
        // looping every tenth of a second

    // more initial map load code

    }

    // more idle map code

});

Boom. Tell me if this makes sense.