구글 지도 퍼가기 중앙 정렬 및 반응형 변환

해외 여행 블로그 글에 구글 맵 링크 첨부하는 방법

해외 여행 후기를 올릴 때 캡처 이미지로만 위치를 공유하면 일일이 장소를 재검색해야 하는 번거로움이 생깁니다.

반면 구글 맵 직접 링크를 넣어두면 링크 클릭 한 번으로 위치 정보를 확인하고, 자신의 구글 맵에 ‘저장’하거나 ‘길찾기’로 바로 연동할 수 있어 포스팅의 정보 가치가 훨씬 올라갑니다.

1. 구글 맵에서 장소 검색

https://www.google.co.kr/maps/

공유 – 지도 퍼가기 – HTML 복사

2. 지도 붙여넣기

지도 퍼가기 HTML 복사 코드

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7432.834043963457!2d-157.9269428920177!3d21.334040126665034!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7c006fa6b7ac7237%3A0xafea77881be03684!2sInternational%20Parking%20Garage!5e0!3m2!1sko!2skr!4v1786379361368!5m2!1sko!2skr"
 width="600"
 height="450"
 style="border:0;"
 allowfullscreen=""
 loading="lazy"
 referrerpolicy="strict-origin-when-cross-origin">
</iframe>

위의 HTML을 붙여 넣으면 아래와 같이 포스팅 글에 지도를 삽입할 수 있습니다.

3. 지도 붙여넣기 및 중앙 정렬 추가

중앙 정렬 추가(div 태그 활용)

<div style="text-align: center;">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7432.834043963457!2d-157.9269428920177!3d21.334040126665034!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7c006fa6b7ac7237%3A0xafea77881be03684!2sInternational%20Parking%20Garage!5e0!3m2!1sko!2skr!4v1786379361368!5m2!1sko!2skr"
 width="600"
 height="450"
 style="border:0;"
 allowfullscreen=""
 loading="lazy"
 referrerpolicy="strict-origin-when-cross-origin">
</iframe>
</div>

중앙 정렬을 위해 구글 지도 iframe을 div style=”text-align: center;” 태그로 감싸고 text-align: center; 스타일을 적용하여 중앙 정렬을 적용하였습니다.

div 태그로 중앙 정렬을 적용하니 PC에서는 문제가 없으나 모바일에서 화면에서는 고정 width로 수평 스크롤이 발생하는 문제 발견.

4. 지도 붙여넣기 및 반응형 적용

CSS 추가 및 HTML 수정

CSS 추가

.map-container {
  text-align: center;
}

/* 기본값: PC 환경 (600 x 450) */
.responsive-map {
  width: 600px;
  height: 450px;
}

/* 모바일 환경 (화면 너비 768px 이하) */
@media (max-width: 768px) {
  .responsive-map {
    width: 300px;
    height: 300px;
    max-width: 100%; /* 화면 폭이 300px보다 작은 초소형 모바일에서도 지도가 잘리지 않도록 보호 */
  }
}

CSS 클래스(responsive-map) 추가

HTML 수정

<div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7432.834043963457!2d-157.9269428920177!3d21.334040126665034!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7c006fa6b7ac7237%3A0xafea77881be03684!2sInternational%20Parking%20Garage!5e0!3m2!1sko!2skr!4v1786379361368!5m2!1sko!2skr"
 class="responsive-map"
 style="border:0;"
 allowfullscreen=""
 loading="lazy"
 referrerpolicy="strict-origin-when-cross-origin">
</iframe>
</div>

div class=”map-container” 추가 & iframe의 width, height 속성 제거

※ 기능 상세

1. HTML 구조(div class=”map-container” 및 iframe)

안전한 모바일 로딩: loading=”lazy” 속성을 적용하여 페이지 초기 로딩 시 지도를 즉시 불러오지 않고, 스크롤이 지도 위치에 다다랐을 때 로딩하도록 하여 웹페이지 로딩 속도 최적화.

보안 및 정책 준수: referrerpolicy=”strict-origin-when-cross-origin”을 설정해 교차 출처 간 API 호출 시 참조 URL(Referrer) 정보를 안전하게 보호.

접근성 및 인터랙션: allowfullscreen=”” 속성으로 사용자가 지도 화면을 전체 화면으로 확대해 볼 수 있도록 허용.

2. CSS 반응형 스타일링 (.map-container, .responsive-map, @media)

레이아웃 정렬: .map-container에 text-align: center;를 적용하여 지도를 부모 요소 기준 중앙에 정렬.

데스크톱(PC) 최적화: 기본 고정 해상도를 600px × 450px로 지정하여 일반 모니터 환경에서 안정적인 지도 보기 크기를 확보.

모바일 최적화 (미디어 쿼리): 화면 너비가 768px 이하인 모바일 기기에서는 지도 크기를 300px × 300px로 축소.

초소형 기기 수평 스크롤 방지: max-width: 100%;를 추가하여 화면 폭이 300px 미만인 소형 스마트폰에서도 지도가 화면 밖으로 넘치지(Overflow) 않도록 안전장치를 마련.

관련 링크

카카오 지도 퍼가기 중앙 정렬 및 반응형 변환

구글 지도 퍼가기 중앙 정렬 및 반응형 변환

코멘트

답글 남기기 응답 취소