구글 맵 스크롤 비활성화하기

과거에는 홈페이지에 찾아 오시는 길에 직접 약도를 그려서 올렸지만 이제는 대부분 구글 맵이 사용되고 있습니다. 구글 맵(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;
}

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

참고:

• 블로그에 구글맵을 삽입하는 방법
• 케이브드 게시판에서 구글맵 사용하기