javascript - ポジショニングを制御

Question

Google マップ v3 を使用してマップに追加するコントロールがあります。現在、次のようになっています。

右向きの矢印が横に出ているのがわかりますか?

現在、このコードを使用して追加しています：

// 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);

そしてそれは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;}

ただ、明らかに位置がずれています。デフォルト コントロールがカスタム コントロールの途中で下に移動するようにするにはどうすればよいですか?

Answer 1

自分自身を少し楽にするために、あなたにも同じことをお勧めしますが、コントロールを反対側に移動するだけで、誰も傷つけることはありません. そして、私はそれがずっと良く見えると信じています。

これを行うには、これをマップオプションに追加するだけです

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
},