Google Maps->如何在用戶單擊按鈕后使地圖變暗並完全禁用

Question

因此，我之前創建了許多地圖應用程序，但是目前我正在開發的應用程序實際上與它有一些交互。

用戶可以單擊標記並接受它們，然后單擊地圖外部但在同一頁面上的按鈕后，數據將被保存。

那時，我正在顯示一堆有關地圖外部某些div發生的數據。

我現在要發生的是，我希望地圖變暗，就像透明的黑色，使它看起來不再起作用，並完全禁用地圖。

如果您曾經使用過fancybox，則類似於fancybox上拉后的背景屏幕。

我一直在搜尋有關此問題的任何想法或想法，但實際上還沒有找到任何方法可以實現。

Answer 1

我不妨用小提琴來回答。

jsFiddle-> http://jsfiddle.net/HB324/

HTML->

<div id="hide_map">
  <a href="#"> Click Me To Hide Map </a>
</div>
<div id="map_canvas"></div>

CSS->

#map_canvas{
 position:relative;
 height:300px;
 width:300px;    
}

.overlay{
  position:absolute;
  top:0;
  left:0;    
  width:100%;
  height:100%;
  background:rgba(0,0,0,.5);
}

JavaScript->

var geocoder;
var map;
var latlng;
jQuery(document).ready(function() {

        geocoder = new google.maps.Geocoder();
          var address = 'United States';
          geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              latlng=results[0].geometry.location;
              var myOptions = {
                zoom: 16,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.HYBRID
              }
              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
              var marker = new google.maps.Marker({
                  map: map,
                  position: latlng,
                  title:address
              });
            }
          });
    });

編輯：忘記了CSS，添加了CSS