背後透明ヘッダーとサイドバー

Question

私たちは、次のようなレイアウトを持つべきであるウェブサイトを構築しているが、Googleマップを拡張Google Maps Javascript API v3で構築されたGoogleマップ。今

我々はマップは、ヘッダー、サイドバー、このようなものの背後に見えるだろうように、ヘッダーとサイドバーが半透明にしたいと思います：

しかし、今、ヘッダーとサイドバーは、Googleロゴとズームコントロールと重なっています。

コントロールの配置にパディングを適用する必要があることをGoogleマップに伝える方法はありますか？

もちろん、CSSを適用してGoogleロゴやコントロールを「手動」に移動することもできますが、GoogleマップのJavaScript APIはユーザーが地図を使用するたびにその場所を復元します（パンやスクロールなど）。これにより、GoogleのコードとGoogleの間の闘争が発生します。

Answer 1

zoom control配置するためとして、あなたは例えば、Control positioningを使用することができます。

コントロール

あなたが追加することができます。

zoomControlOptions: { 
     position: google.maps.ControlPosition.RIGHT_TOP 
    }, 

Answer 2

私は確実に動作するように思われる答えを発見しましたダミーコントロールを追加してコントロールのトップマージンを設定します。

var dummy = document.createElement('div'); 
dummy.style.height = '55px'; 
dummy.style.width = '100px'; 
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(dummy); 

次に、コンフィギュレーションでは、RIGHT_TOPでズームコントロールを配置します。

zoomControl: true, 
zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.LARGE, 
    position: google.maps.ControlPosition.LEFT_TOP, 
}, 

（注）この唯一の作品そのTOP_RIGHTコントロールは常にRIGHT_TOP上記のコントロールを配置しているため。

次のコードを初期化するには、Googleマップを待ちGoogleロゴ

は、その後、ロゴにクラスgmaps-logo-paddedを追加します。

var moveLogo = function() { 
    var logo = $('#map div a div img').parent().parent().parent(); 
    if (logo.length == 0) 
     window.setTimeout(moveLogo, 10); 
    else 
     logo.addClass('gmaps-logo-padded'); 
}; 
moveLogo(); 

次に、以下のCSSを適用することで、あなたが変更することができますロゴの配置：

.gmaps-logo-padded { 
    left: 300px !important; 
} 

Terms of Serviceのパラグラフ9.4は、ロゴを隠したり削除禁止に注意してください。