Tech Stock logo Tech Stock

구글맵을 반응형으로 끌어다 써보자

구글맵에서 찾고싶은곳을 찾은 후에
공유 버튼을 누르면 팝업창이 하나 뜬다
거기서 지도 퍼가기 탭을 누르면
iframe이라는 태그로 묶여져있는 리소스 링크를 퍼갈 수가 있다.

Googlemap-Responsive

문제는??
그것을 퍼가는것 까지는 다 좋은데,
자신의 블로그나 사이트에서 반응형이 되지 않을 것이다.

자료를 찾아보니 영어 사이트든 일본어 사이트든
디자이너 능력자 님께서 비슷한 답변을 아주 친절하게 해주고 계셨다.

■ 첫번째. 위에서 퍼온 iframe으로 묶인 주소를 div태그로 감싸서 컨트롤 하자
(html)

<div class="gmap">
구글맵에서 퍼온 주소(iframe로 감싸져있는 애)
</div>

■ 두번째. 이제 gmap이란 이름으로 감싼 div를 요리해줘야 한다. CSS작성
(CSS)

.gmap {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}

.gmap iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100;
}

gmap이란놈은 이렇게 요리 할것이고,
gmap안에 iframe이라는놈은 또 이렇게 요리할것임
이런 정도로만 일단 이해하자

이제 반응형으로 잘 나오는지 확인해보자 ㅎㅎ


.
.
.
디자이너들의 첨언들

padding-bottom은 퍼센테이지로 지정 (이것이 핵심 : %이므로 가변적이게 된다)
padding-top이라도 상관은 없다
왜 56.25%이냐하면. 아스펙트 비율이 16:9 이기 때문이다
9/16 * 100 = 56.25
아스펙트 비율이 4:3일 경우에는 75%가 된다
3/4 * 100 = 75
구글맵과 유튜브 영상 임베드 반응형 까지 감안했을때 56.25를 한다

아스펙트? 가 튀어나오고 갑자기 비율이 나오고 .. 음.. 뭐임?????
이런 느낌일것 나도 알고 있다.
각설하고 간단하게 이해하자면,

블로그나 사이트를 운영하는 당신!

  • 페이지 내에 구글맵만 넣을꺼임?
  • 잠정적으로 유튜브 영상도 퍼와서 임베드하게 넣을꺼 아님??
  • 그런데 유튜브 영상은 기본 16:9 비율로 보이게끔 되어있음
  • 그것을 반응형으로 했을때도 마찬가지로 16:9 비율로 모바일 기기에서 보이게끔 해야됨.
  • 그런것들을 다 감안해서 구글맵도 16:9비율로 보이게끔 맞춰주는 거임.

나는 이렇게 이해를 했다 -_-;;;