구글맵을 워드프레스 등 블로그에 삽입하기

블로그에 구글맵 삽입하기

블로그에 구글맵을 삽입하는 방법입니다. 여기에 설명한 방법은 Google 지도 사이트의 “지도 퍼가기” 페이지를 참고하였습니다. (구글맵 UI는 2015년 7월 말 현재 기준입니다.)

블로그에 구글맵을 추가하는 절차

1. 먼저 구글맵 사이트로 이동하여 원하는 지역을 검색합니다.
Googlemap search

2. 왼쪽 상단의 메뉴 아이콘을 클릭합니다.
Googlemap menu icon

3. 표시되는 메뉴에서 “지도 공유 또는 퍼가기”를 선택합니다.
Googlemap Share or Embed Map

4. “지도 퍼가기”를 선택합니다.

원하는 크기를 선택한 후 코드를 복사해 웹사이트 또는 블로그의 소스 코드에 코드를 붙여넣습니다.

참고로 UI가 영어로 나오면 메뉴에서 “Korean – 한국어”를 선택하면 UI가 한글로 바뀝니다.
Googlemap UI language

참고로 반응형으로 구글맵을 삽입하려면 iframe 외부를 별도의 class를 둘러싼 다음에 CSS로 조정해주면 됩니다.

<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?...</iframe>
</div>

다음 CSS를 사용합니다.

.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
/* Source: ostraining

위와 같이 적용하면 구글지도가 모바일에서도 제대로 표시될 것입니다.

 

참고

떠나시기 전에 아무 댓글(Comments)이라도 남겨두세요.
기부를 통해 이 블로그의 운영을 후원하실 수 있습니다.