ぼかしでcustumコントロールを使用する方法Google Maps JavaScript API

Question

私は、Google Mapsでフルスクリーンマップ上で非常に単純なUIを作ろうとしています。私は、ぼかした地図と、クリックしたときにぼかしを取り除くボタンを持っていたいと思います。私は基本的に現在のコード（重くはthis exampleに基づいています）でその機能を持っていますが、コントロールのdivはマップと共にぼやけています。私はこのような例を広範囲に捜し求めてきましたが、ある時点ではZ-索引付けや運がないもので遊んでいました。どのようにマップ要素をぼかすことができますか？ここで

私のコードです：それはマップ制御作るなぜ

var map = new google.maps.Map(document.getElementById('map'), { 
center: {lat: 0, lng: 0}, 
zoom: 3, 
minZoom: 3, 
disableDefaultUI: true, 
mapTypeId:google.maps.MapTypeId.HYBRID, 
styles:[ 
    { 
     "featureType": "road", 
     "stylers": [ 
      { "visibility": "off" } 
     ] 
    },{ 
     "featureType": "transit", 
     "stylers": [ 
      { "visibility": "off" } 
     ] 
    }] 
}); 

function Control(controlDiv, map) { 

    // Set CSS for the control border. 
    var controlUI = document.createElement('div'); 
    controlUI.style.backgroundColor = '#fff'; 
    controlUI.style.border = '2px solid #fff'; 
    controlUI.style.borderRadius = '3px'; 
    controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; 
    controlUI.style.cursor = 'pointer'; 
    controlUI.style.marginBottom = '22px'; 
    controlUI.style.textAlign = 'center'; 
    controlUI.title = 'Click to recenter the map'; 
    controlDiv.appendChild(controlUI); 

    // Set CSS for the control interior. 
    var controlText = document.createElement('div'); 
    controlText.style.color = 'rgb(25,25,25)'; 
    controlText.style.fontFamily = 'Roboto,Arial,sans-serif'; 
    controlText.style.fontSize = '16px'; 
    controlText.style.lineHeight = '38px'; 
    controlText.style.paddingLeft = '5px'; 
    controlText.style.paddingRight = '5px'; 
    controlText.innerHTML = 'Blur'; 
    controlUI.appendChild(controlText); 

    controlUI.addEventListener('click', function() { 
     document.getElementById('map').setAttribute("style", "transition-timing-function: ease-in-out;" + 
                "-webkit-transition-duration: 1.5s;" + 
                "-webkit-filter: blur(0px);"); 
     ControlDiv.style.display = 'none'; 
    }); 

} 

var ControlDiv = document.createElement('div'); 
new Control(ControlDiv, map); 

map.controls[google.maps.ControlPosition.CENTER].push(ControlDiv); 

Here is the fiddle

Answer 1

？ 1つのオプションは、マップから別のdivにしてマップ上に配置することです。

proof of concept fiddle

コードスニペット：

var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
    lat: 0, 
 
    lng: 0 
 
    }, 
 
    zoom: 3, 
 
    minZoom: 3, 
 
    disableDefaultUI: true, 
 
    mapTypeId: google.maps.MapTypeId.HYBRID, 
 
    styles: [{ 
 
    "featureType": "road", 
 
    "stylers": [{ 
 
     "visibility": "off" 
 
    }] 
 
    }, { 
 
    "featureType": "transit", 
 
    "stylers": [{ 
 
     "visibility": "off" 
 
    }] 
 
    }] 
 
}); 
 

 
function Control(controlDiv, map) { 
 

 
    // Set CSS for the control border. 
 
    var controlUI = document.createElement('div'); 
 
    controlUI.style.backgroundColor = '#fff'; 
 
    controlUI.style.border = '2px solid #fff'; 
 
    controlUI.style.borderRadius = '3px'; 
 
    controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; 
 
    controlUI.style.cursor = 'pointer'; 
 
    controlUI.style.marginBottom = '22px'; 
 
    controlUI.style.textAlign = 'center'; 
 
    controlUI.title = 'Click to recenter the map'; 
 
    controlDiv.appendChild(controlUI); 
 

 
    // Set CSS for the control interior. 
 
    var controlText = document.createElement('div'); 
 
    controlText.style.color = 'rgb(25,25,25)'; 
 
    controlText.style.fontFamily = 'Roboto,Arial,sans-serif'; 
 
    controlText.style.fontSize = '16px'; 
 
    controlText.style.lineHeight = '38px'; 
 
    controlText.style.paddingLeft = '5px'; 
 
    controlText.style.paddingRight = '5px'; 
 
    controlText.innerHTML = 'Click'; 
 
    controlUI.appendChild(controlText); 
 

 
    controlUI.addEventListener('click', function() { 
 
    document.getElementById('map').setAttribute("style", "transition-timing-function: ease-in-out;" + 
 
     "-webkit-transition-duration: 1.5s;" + 
 
     "-webkit-filter: blur(0px);"); 
 
    ControlDiv.style.display = 'none'; 
 
    }); 
 

 
} 
 

 
var ControlDiv = document.createElement('div'); 
 
new Control(ControlDiv, map); 
 
document.getElementById('blurctl').appendChild(ControlDiv); 
 
// map.controls[google.maps.ControlPosition.CENTER].push(ControlDiv);

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
    -webkit-filter: blur(12px); 
 
} 
 
#blurctl { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div> 
 
<div id="blurctl"></div>