Question

I have a control which I am adding to the map using google maps v3, currently it looks like this:

See how the right pointing arrow is out to the side?

I am currently adding it using this code:

// Create a div to hold the control.
var controlDiv = document.createElement('div');
var controlUI = document.createElement('button');
controlUI.id = "out";
controlUI.innerHTML = "<i class='icon-chevron-right'></i>";
controlDiv.appendChild(controlUI);

Maps.map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlDiv);

and it has the css…

#out {position:relative;top:5px;right:0;float:right;border:1px #aaa solid;border-left:0;padding:2px 4px;-webkit-border-top-right-radius: 2px;-webkit-border-bottom-right-radius: 2px;-moz-border-radius-topright: 2px;-moz-border-radius-bottomright: 2px;border-top-right-radius: 2px;border-bottom-right-radius: 2px;}

But the position is obviously a bit off. How can I make it so that the default controls move down in way for the custom control?

Answer 1

To make things a bit easier on myself, and I suggest you do the same, is to just move the controls over to the other side, its not going to hurt anyone. And I believe it looks a lot nicer.

To do this just add this to your map options

mapTypeControl: false,
panControl:true,
panControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl:true,
zoomControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControl:true,
streetViewControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
},