구글지도를 아이프레임으로 넣었을 때...
본문
회사 안내 페이지에...구글지도를 아이프레임 안에 넣었습니다.
(http://www.funsite-trunk.biz/funsite_new/company/index.html) 현재 작업중인 페이지
그런데 아이프레임 위에 마우스 휠이 되지 않도록 할 수 있을까요?
페이지 전체를 휠로 아래로 내리면 지도에 걸려 줌/아웃이 되어버립니다.
그래서 휠만 안되게 하고 싶은데...
검색해보니 아이프레임으로 넣는 방법 말고,
API로 넣는 방법으로 주소를 좌표로 넣고
자바스크립트에 scrollwheel: false를 설정해 주는 것이 있던데,
그렇게 하면 경로가 나오지 않아서 아이프레임으로 넣고 싶은데...
혹시 방법이 있을까요?
요렇게 경로로 지도를 표시하고 싶어서요..
아니면,
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(35.365186, 139.636400);
var mapOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
</script>
위 스크립트를 사용하고 있는데, 저기 좌표로 표시되는 방법 말고,
경로로 보여지게 할 수 없을까요?
질문이 애매한데... 아시는 분은 답변 부탁드립니다 (__)꾸벅
답변 1
해당소스를 아래 것으로 대체해 보세요.
아이프레임 내에 마우스 포인트 찍으면 맵 줌인/아웃이 다시 작동됩니다.
그렇지 않고 아이프레임 밖으로 마우스포인트 찍으시면 작동 되지 않구요 ㅎㅎ
<!--구글맵 마우스휠 작동금지 -->
<style type="text/css">
.nowheel {
background:transparent;
position:relative;
width:100%;
height:600px; /* your iframe height */
top:600px; /* your iframe height */
margin-top:-600px; /* your iframe height */
}
</style>
<div class="nowheel" onClick="style.pointerEvents='none'"></div>
<div class="box_access_yokohama" onClick="style.pointerEvents='none'">
<iframe src="https://www.google.com/maps/embed?pb=!1m29!1m12!1m3!1d3253.518244410906!2d139.6308152337612!3d35.36760040242792!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m14!1i0!3e6!4m5!1s0x601843988011a5db%3A0x902aa7d87689b909!2z5Lqs5oCl5a-M5bKh6aeF77yI56We5aWI5bed77yJ!3m2!1d35.367087999999995!2d139.629855!4m5!1s0x601843bb0af98a89%3A0x4eda072f1ec33a54!2z77y177yy6YO95biC5qmf5qeL5Lim5pyo5LqM5LiB55uu5Zuj5Zyw77yW77yN77yW5Y-35qOfLCDnpZ7lpYjlt53nnIzmqKrmtZzluILph5HmsqLljLrkuKbmnKjvvJLkuIHnm67vvJbiiJLvvJY!3m2!1d35.3651771!2d139.63640239999998!5e0!3m2!1sja!2sjp!4v1417077289645" width="100%" height="600" frameborder="0" style="border:0"></iframe>
</div>
감사합니다 네이비칼라님!! >_ <///
잘 적용되었습니당 ㅎㅎ
