참고: 인기 워드프레스 테마인 아바다X 테마, BE 테마가 39달러로 할인 중입니다.

과거에는 홈페이지에 찾아 오시는 길에 직접 약도를 그려서 올렸지만 이제는 대부분 구글 맵이 사용되고 있습니다. 구글 맵(Google 지도)을 이용하면 편리하게 지도를 삽입할 수 있지만, 종종 스크롤 문제 때문에 짜증이 나거나 번거로울 수 있습니다. 예를 들어, 다음과 같은 지도를 삽입했을 때 마우스를 지도 위에 올린 상태에서 아래로 스크롤하기 위해 휠을 돌리면 지도가 확대/축소되는 현상이 나타납니다.

상황에 따라 매우 편리할 수도 있지만 원치 않은 스크롤 동작 때문에 사용자들이 번거로울 수도 있습니다. 이 경우 몇 가지 방법을 통해 구글 지도 내에서 스크롤이 동작하지 않도록 만들 수 있습니다. jQuery도 가능하겠지만 CSS로 하는 것이 비교적 간단합니다.

<div class="map_wraper">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3163.983921264011!2d126.9009542!3d37.5318763!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c9edc5801b12d%3A0x44937d2f43e0fa7!2z6rCV64Ko7LmY6rO8!5e0!3m2!1sko!2skr!4v1451398478458" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

위와 같은 형태로 구글 맵 코드를 삽입하고 다음과 같은 CSS 코드를 스타일시트에 추가합니다.

/* 구글 맵 스크롤 방지 */
.map_wraper{
position:relative;
}
.map_wraper:after{
background: none;
content: " ";
display: inline-block;
font-size: 0;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 9;
}
// Source: stackoverflow

실제로 테스트해보면

다른 방법으로 다음과 같이 간단한 CSS 코드로도 가능합니다.

.map_wraper iframe {
pointer-events:none;
}

이 코드를 워드프레스에서 테스트해봤는데 잘 작동했습니다. 이 코드보다는 위에서 소개한 코드가 많은 경우에서 더 잘 작동하는 것 같습니다.

참고:

 

떠나시기 전에 아무 댓글(Comments)이라도 남겨두세요.