Попытка добавить слой непрозрачности между картой и значком маркера, который должен покрывать карту, но маркер должен быть над ней (более высокий Z-индекс).
До сих пор я пробовал элемент: after для контейнера #map, но он не работает должным образом, маркер не может быть поднят над ним.
#map:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.2;
background-color: #3388ff;
}
У меня естьтакже попытался добавить div к слою управления, как это
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('overlay_map'));
Но я все еще не могу достичь более высокого z-индекса для маркера, так как #overlay_map добавляется как тот же уровень div, чем iframe длякарта не внутри фрейма.Вот полный код:
function initMap() {
var myLatLng = {lat: 59.438936, lng: 24.761484};
var mapOptions = {
zoom: 16,
center: myLatLng,
disableDefaultUI: true,
styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#111419"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#f9fbff"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#f9fbff"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#ecf0f4"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"simplified"},{"lightness":"-4"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f9fbff"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#d9dfe8"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f9fbff"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e5eaf0"},{"lightness":17}]}]
};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
optimized: false,
zIndex:99999999,
map: map,
icon:'<?php bloginfo('template_directory'); ?>/assets/map_pin.svg'
});
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('overlay_map'));
}
window.initMap = initMap;
Я прикрепил два изображения: текущий результат / то, что я пытаюсь достичь.Любой совет, как этого добиться?Может ли это быть достигнуто с помощью стиля карты?
Текущий результат (маркер под слоем непрозрачности):
Результат поиска (маркер над слоем непрозрачности):