Добавить вложенную рамку-тень в элементе Google Maps

Я готов добавить некоторую вставку-тень в тег, содержащий элемент Google Maps. Однако, кажется, ничего не происходит, вероятно, потому, что Google загружает другой div в исходный элемент, поэтому покрывает сгенерированную коробку-тень.

Как я могу достичь этого эффекта?

Вот код, который у меня есть:

<section id="map-container">
    <figure id="map"></figure>
</section>

#map-container  {
    position: relative;
    float: right;
    width: 700px;
    background-color: #F9FAFC;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#map    {
    position: relative;
    height: 400px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}

Спасибо!

Ответ 1

Выяснил это. Здесь рабочий CSS:

#map-container  {
    position: relative;
    float: right;
    width: 700px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}

#map    {
    position: relative;
    height: 400px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: -1
}

Ответ 2

Как я это сделал. Следующий метод не будет перекрывать элементы управления картой, поэтому вы сможете манипулировать картой, т.е. Перетаскивать, кликать, масштабировать и т.д.

HTML:

<div class="map-container">
    <div class="map"></div>
</div>

CSS

.map-container {
    position: relative;
    overflow: hidden;
}
.map-container:before, .map-container:after, .map:before, .map:after {
    content: '';
    position: absolute;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.map-container:before { top: -5px; left: 0; right: 0; height: 5px; }
.map-container:after { right: -5px; top: 0; bottom: 0; width: 5px; }
.map:before { bottom: -5px; left: 0; right: 0; height: 5px; }
.map:after { left: -5px; top: 0; bottom: 0; width: 5px; }

DEMO: http://jsfiddle.net/dkUpN/80/

ОБНОВЛЕНИЕ: Старое решение (см. 1 ^st версия) не поддерживает псевдоэлементы и был совместим со старыми браузерами. Демо все еще доступно здесь: http://jsfiddle.net/dkUpN/.

Ответ 3

У меня была такая же проблема при попытке добавить вставку в одну сторону встроенной карты. Я попытался добавить его к элементу map-canvas, но тени не были видны. Невозможно понять причину такого поведения, возможно, это позиция: абсолютная часть некоторых элементов на карте.

Во всяком случае, вместо добавления других нестандартных элементов в код, я бы предпочел использовать псевдоэлемент из тонкой (5px) полосы, наложенной на карту:

Это добавляет тень на левой стороне :

#map-container:before {
    box-shadow: 4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 5px;
    z-index: 1000;
}

demo: http://jsfiddle.net/marcoscarfagna/HSwQA/

Вместо правой тени:

#map-container:before {
    box-shadow: -4px 0 4px -4px rgba(0, 0, 0, 0.5) inset;
    content: "";
    height: 100%;
    right: 0;
    position: absolute;
    width: 5px;
    z-index: 1000;
}

Ответ 4

Когда вы сталкиваетесь с такой проблемой, я обычно возвращаюсь к использованию пользовательских оверлеев. (https://developers.google.com/maps/documentation/javascript/overlays#AddingOverlays)

Используйте настраиваемый оверлей, чтобы добавить div внутри карты в зависимости от того, какой слой вам подходит, вы сможете стилизовать этот div с помощью CSS.

Ответ 5

Ответ Андрея Хорака работает лучше всего.

Но иногда использование z-index не является вариантом из-за вашего макета. Добавление дополнительного div в карты google является вторым лучшим вариантом:

#map_canvas .shadow{
    width:100%;
    position:absolute;
    left:0;
    top:0px;
    height:100%;
    z-index:99999;
    position:relative;
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

Затем на ваших картах google script:

google.maps.event.addListener(map, 'idle', function() {
        // Add shadow effect on map
        $("#map_canvas .shadow").remove();
        $("#map_canvas").prepend('<div class="shadow">');

    });

pointer-events:none; немного сложнее из-за совместимости с браузером. Подробнее о указателях-событиях здесь

Ответ 6

Еще один вариант, хотя и не работает во всех случаях, заключается в том, чтобы поместить тень на элемент рядом с картой. Google сделал это так здесь

Ответ 7

Вам нужно будет взглянуть на элементы, которые Google добавляет и настраивает и переопределяет их со стилями CSS. Используйте Firebug, webkit "проверять элемент" и т.д., Чтобы увидеть добавленные элементы и их стили.

Ответ 8

Если вы ищете стиль, в окне infowindow посмотрите этот вопрос.

Это относится ко многим объектам, которые отображаются на картах Google. Ориентация на них с помощью собственного css возможна, но я сомневаюсь, что кто-то это сделал, потому что это hard (я пытался).

Ответ 9

Я добавил дополнительный, который содержал тень вставки. HTML: ... #mapContainer { позиция: относительная; }

.map{
width:425px;
height:350px;
z-index:9999;
position:absolute;
top:0;
left:0;
@include borderAffect($pad:0,$borderCol:#00467F,$insetVal:true);        
}

Ответ 10

Использование pointer-events: none; для псевдо-элементов до и после помогает, если вам нужны большие тени (что повлияет на манипуляции с картами). Таким образом, эти элементы, похоже, не существуют для указателя мыши...