Wie benutze ich custum controls mit blur Google Maps JavaScript API

Question

Ich versuche eine sehr einfache Benutzeroberfläche über eine Vollbild-Karte mit Google Maps zu erstellen. Ich hätte gerne eine verschwommene Karte und eine Schaltfläche, die die Unschärfe wegnimmt, wenn Sie darauf klicken. Ich habe grundsätzlich diese Funktionalität mit meinem aktuellen Code (stark basierend auf this example), aber das Steuerelement div ist zusammen mit der Karte verschwommen. Ich habe weit und breit nach Beispielen wie diesem gesucht und irgendwann mit der Z-Indizierung herumgespielt und Sachen, die kein Glück bringen. Wie kann ich das Kartenelement verwischen, während auf der Karte auch ein Steuerelement für die Unschärfe-Unschärfe vorhanden ist?

Hier ist mein Code:

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

Warum es sich um eine Karte Kontrolle machen? Eine Option wäre, es zu einem separaten Teil von der Karte zu machen und es über der Karte zu positionieren.

proof of concept fiddle

Code-Schnipsel:

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>