정보실

웹학교

정보실

그누보드 구글맵을 반응형으로 반영하기

본문

Javascript:

jQuery(function($){

  

  // Prevent Google Maps from hijacking scroll

var onMapMouseleaveHandler = function (event) {

var that = $(this);

that.on('click', onMapClickHandler);

that.off('mouseleave', onMapMouseleaveHandler);

that.find('iframe').css("pointer-events", "none");

}


var onMapClickHandler = function (event) {

var that = $(this);

// Disable the click handler until the user leaves the map area

that.off('click', onMapClickHandler);

// Enable scrolling zoom

that.find('iframe').css("pointer-events", "auto");

// Handle the mouse leave event

that.on('mouseleave', onMapMouseleaveHandler);

}


// Enable map zooming with mouse scroll when the user clicks the map

$('.responsive-map').on('click', onMapClickHandler);


});


CSS:

.responsive-map {

position: relative;

width: 100%;

height: 0;

padding-bottom: 75%; /* 450/600 */

}


.responsive-map iframe {

position: absolute;

pointer-events: none;

top: 0;

left: 0;

width: 100% !important;

height: 100% !important;

}


  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 112회 ]  작성일18-04-27 15:46

웹학교