Google지도 요소에 삽입 그림자를 추가하십시오.

Question

Google지도 요소가 포함 된 태그에 일부 삽입 상자 그림자를 추가하고 싶습니다. 그러나 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; 
} 

감사합니다!

Answer 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 
} 

Answer 2

Google이 추가하고 타겟팅하는 요소를보고 CSS 스타일을 무시해야합니다. Firebug, webkit "inspect element"등을 사용하여 추가되는 요소와 스타일을 확인하십시오.

Answer 3

infowindow의 스타일을 지정하려는 경우 this question을보십시오.

Google지도에 표시되는 대부분의 개체에 적용됩니다. 자신의 CSS를 사용하여 타겟팅하는 경우 이 가능하지만 (시도했지만) 사람이 누구인지 의심 스럽습니다.

Answer 4

삽입 그림자가 들어있는 여분을 추가했습니다. HTML : ... #mapContainer { 위치 : 상대적; }

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

Answer 5

그것이 내가 한 방법입니다. 다음 방법은지도 컨트롤을 중복되지 않습니다, 그래서 당신은 등지도, 즉 드래그, 클릭, 줌,

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/

---

UPDATE : 오래된 솔루션 (1^st revision 참조) 의사 요소는 지원이 오래된 브라우저와 호환했다하지 않았다. 데모는 여전히 여기에서 얻을 수 있습니다 : http://jsfiddle.net/dkUpN/.

Answer 6

이런 종류의 문제에 직면했을 때 대개 사용자 지정 오버레이를 사용합니다. (https://developers.google.com/maps/documentation/javascript/overlays#AddingOverlays)

사용자 정의 오버레이를 사용하여 가장 적합한 레이어에서 div를 추가하여 CSS로이 div의 스타일을 지정할 수 있습니다.

Answer 7

Andrei Horak 대답이 가장 잘 작동합니다.

하지만 때때로 레이아웃을 사용하기 때문에 z- 색인을 사용할 수없는 경우가 있습니다. 당신이 구글에서 그런

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

    }); 

pointer-events:none; 때문에 크로스 브라우저 호환성의 조금 까다 롭습니다지도를 Google에 별도의 사업부를 추가하면 두 번째 최선의 방법입니다. 포인터 이벤트에 대한 자세한 내용 here

Answer 8

다른 옵션 중 하나는 모든 경우에 작동하지 않지만 맵 그림자 옆에 요소에 상자 그림자를 넣는 것입니다. Google 자체적으로 이렇게했습니다. here

Answer 9

삽입 된지도의 한면에 삽입 그림자를 추가하는 동안 동일한 문제가 발생했습니다. map-canvas 요소에 추가하려고 시도했지만 그림자가 보이지 않았습니다. 이 행동의 이유에 대해서는 전혀 모르겠다. 아마도지도 내의 일부 요소의 절대 위치 일 것이다. 대신 코드에 다른 unsemantic 요소를 추가하는

어쨌든, 나는 오히려지도에 오버레이 얇은 (5px) 스트립 만든 pseudoelement 가고 싶어 :

이것은 왼쪽에 그림자를 추가 :

#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; 
} 

데모하십시오 권리를 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; 
} 

Answer 10

전후 의사 요소 pointer-events: none;을 사용하여 도움이됩니다. 따라서 이러한 요소는 마우스 포인터에 대해 존재하지 않는 것 같습니다.