How to add a fixed layer to the whole map so that when moving around the map and "zooming" the layer remains fixed? The layer should be located on the map below the markers.

I do it via google.maps.OverlayView() custom layer, but this layer does not change its position when moving around the map, but remains in its place.

Please tell me the solution to the problem - you just need to make a darkening of the map with a certain transparency.

Update.

There is also a solution with drawing a rectangle on the map, but when you change the scale for a while, the rectangle disappears and then is redrawn.

https://jsfiddle.net/maximzasorin/kj8fo9a9/

 var mapOverlay = new google.maps.Rectangle({ fillColor: '#000000', fillOpacity: 0.3, strokeWeight: 0, map: map, bounds: new google.maps.LatLngBounds( new google.maps.LatLng(-90, -180), new google.maps.LatLng(90, 180) ) });
  • So maybe you need to use google.maps.StyledMapType? - Andrii Kulyk
  • @AndriiKulyk Perhaps, tell me how to achieve this effect using styles? - Maxim Zasorin

1 answer 1

Somehow, for example:

https://jsfiddle.net/anatolysukhanov/o4f8u3d7/

 var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 55.75583, lng: 37.6177, }, zoom: 8, styles: [ { featureType: "all", "stylers": [ { "saturation": -50}, { "lightness": -20 }, ] } ]});
  • Thank you, this decision came up. - Maxim Zasorin