ホバー上にGoogleマップのコントロールを表示する

Question

ユーザーがマップ上を移動したときにデフォルトのGoogleマップコントロールを表示するにはどうすればよいですか？それ以外の場合は、コントロールを非表示にしたいと思います。

Answer 1

マップのsetOptionsメソッドを使用して、コントロールを表示または非表示にすることができます。表示/非表示にするすべてのcontrolOptionsを持つオブジェクトを引数として渡し、コントロールの値をtrueまたはfalseに設定します。

mouseoutとmouseoverのイベントリスナーをマップに追加し、そこでオプションを設定します。

例：

//the controls you want to hide 
    var controlsOut={ 
        mapTypeControl:false, 
        zoomControl:false, 
        panControl:false, 
        streetViewControl:false 
        }; 

    //create a copy of controlsOut and set all values to true 
    var controlsIn={}; 

     for(var c in controlsOut) 
     { 
     controlsIn[c]=true; 
     } 

    //initially hide the controls 
    map.setOptions(controlsOut) 

    //add listeners to show or hide the controls 
     google.maps.event.addDomListener(map.getDiv(), 
           'mouseover', 
           function(e) 
           { 
            e.cancelBubble=true; 
            if(!map.hover) 
            { 
             map.hover=true; 
             map.setOptions(controlsIn); 
            } 
            }); 

     google.maps.event.addDomListener(document.getElementsByTagName('body')[0], 
           'mouseover', 
           function(e) 
           { 
            if(map.hover) 
            { 
            map.setOptions(controlsOut); 
            map.hover=false; 
            } 
           }); 

Answer 2

これは、マップコントロールはホバーのみのことについて唯一の問題についてのようです。上記の答えは私のためにはあまり効果がありませんでしたので、私自身の変更を文書化したいと考えました。

// dom is the enclosing DOM supplied to new google.maps.Map 
// controlsIn and controlsOut are hashes of options to set 
// when the mouse enters or exits. 

$(dom).mouseenter(function(evt) { 
    if (!map.hover) { 
    map.hover = true 
    map.setOptions(controlsIn) 
    } 
}); 

$('body').mouseover(function(evt) { 
    if (map.hover) { 
    if ($(evt.target).closest(dom).length == 0) { 
     map.hover = false 
     map.setOptions controlsOut 
    } 
    } 
});