Google Maps v3のデフォルトコントロールの位置オフセット

Question

Googleマップv3のデフォルトのコントロールの位置を「上、左」にしたいが、それを300pxのままにしたい。 APIを使ってこれを行う方法が見つかりませんでしたか？私はdivをつかんで生のjavascript/jQueryで作る必要があるかもしれないと思う。

ありがとうございます！

Answer 1

もっと簡単な解決策があります。私は、次の機能要求Allow exact control position using pixels（あなたが投票できる）の説明からそのアイディアを得ました。ここでは実装があります：

は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; 
} 

そして、ここではそれのJSFiddleです。あなたはpsxlsの例を使用して、垂直方向の上マージンを設定したい場合は

Answer 2

これは理想的ではないかもしれませんが、私がこれを修正したのはjQueryです。

ここでは、DOM内のユニークな要素を取得し、メインコントローラdivにバブリングすることによって、独特の何も持たないコントロールdivラッパーを取得しています。私はその後、後で使用するために参照が保存されているカスタムdivでラップします。最初はコントロールのdivラッパーを移動しましたが、それは左に移動しました：ホバー上の0。それをカスタムdivで折り返して、うまく機能し、新しいdivラップを後で使用することができます。

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 

}); 

ブーム。これが理にかなっているかどうか教えてください。

Answer 3

、ただ好きそれを使用する必要があります。

function initialize() { 
    var options = { 
     zoom: 8, 
     center: new google.maps.LatLng(-34, 150), 
     zoomControl: true, 
     panControl: true, 
     panControlOptions: { 
      position: google.maps.ControlPosition.LEFT_TOP 
     }, 
     zoomControl: true, 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.LARGE, 
      position: google.maps.ControlPosition.LEFT_TOP 
     } 
    }; 
    map = new google.maps.Map(document.getElementById('map'), options); 

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

google.maps.event.addDomListener(window, 'load', initialize); 

http://jsfiddle.net/54LLm/19/