블로그에 구글맵 삽입하기

4

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

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

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

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

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

4. "지도 퍼가기"를 선택합니다.
Googlemap Embed Map including WordPress - 블로그에 구글맵 삽입하기

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

참고로 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

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

 

참고

4 개 댓글

  1. 새로운 구글 맵 API 표준 플랜에 따라 2016년 6월 22일 이후에 만들어지는 모든 신규 애플리케이션에서는 Google Maps API 키가 필요합니다. http://www.thewordcracker.com/basic/%EA%B5%AC%EA%B8%80-%EB%A7%B5-%EC%B6%94%EA%B0%80-%EC%8B%9C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EA%B2%BD%EC%9A%B0/ 글을 참고해보시기 바랍니다.

  2. 구글맵을 삽입할 때 언어를 지정하려는 경우 다음 글을 참고해보세요:
    http://www.thewordcracker.com/miscellaneous/%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%97%90-%EA%B5%AC%EA%B8%80%EB%A7%B5%EC%9D%84-%EC%82%BD%EC%9E%85%ED%95%A0-%EB%95%8C-%EC%96%B8%EC%96%B4-%EC%A7%80%EC%A0%95%ED%95%98%EA%B8%B0/

  3. 경우에도 따라 다음과 같은 오류가 발생할 수 있습니다.

    죄송합니다. 문제가 발생했습니다, GOOGLE 지도가 제대로 로드되지 않았습니다. 자바스크립트 콘솔에서 기술 정보를 확인하세요

    이 경우 http://www.thewordcracker.com/basic/%EA%B5%AC%EA%B8%80-%EB%A7%B5-%EC%B6%94%EA%B0%80-%EC%8B%9C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EA%B2%BD%EC%9A%B0/ 글을 참고하여 문제 해결을 시도해보시기 바랍니다.

댓글 남기기

댓글을 입력해주세요!
이름을 입력해주세요