블로그에 구글맵 삽입하기

블로그에 구글맵을 삽입하는 방법입니다. 여기에 설명한 방법은 Google 지도 사이트의 "지도 퍼가기" 페이지를 참고하였습니다. 이 방법은 구글맵 API를 등록하지 않고 구글지도 사이트에서 지도를 생성하여 지도 공유 코드를 추가하는 방법입니다.

구글 지도를 블로그에 추가하면 구글 SEO에 유리하게 작용할 수 있다고 하네요. 맛집 소개 글을 작성할 때 구글 지도를 삽입해보시기 바랍니다.

[ 이 글은 2015년도에 작성되었지만 최신 인터페이스에 맞게 완전히 수정하여 다시 발행되었습니다. ]

블로그에 구글맵을 추가하는 방법

1. 먼저 구글맵 사이트로 이동하여 원하는 지역을 검색합니다. 그런 다음 공유 아이콘을 클릭합니다.

2. 공유 창이 표시되면 지도 퍼가기 (①)를 클릭하고 HTML 복사 (②)를 클릭하여 공유 링크를 복사합니다. 그러면 iframe 형식으로 지도가 복사됩니다.

이제 코드를 웹사이트 또는 블로그의 원하는 위치에 붙여 넣습니다.

반응형으로 구글맵 삽입하기

화면 해상도에 맞게 적절한 크기로 지도가 표시되도록 반응형으로 구글맵을 삽입하려면 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

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

워드프레스에 이 방법을 응용하여 구글지도를 추가하는 방법이 아래에 설명되어 있습니다. 비슷한 방법으로 티스토리 블로그에 적용하여 반응형으로 구글지도를 삽입할 수 있습니다.

워드프레스에 구글지도 추가하기

워드프레스에서는 구글맵 플러그인을 사용하여 쉽게 지도를 넣을 수 있습니다. 플러그인 사용을 원하지 않는 경우 위에 제시된 CSS 코드를 활용할 수 있습니다.

워드프레스 관리자 페이지 > 테마 디자인 > 사용자 정의하기 > 추가 CSS에 위의 CSS 코드를 추가합니다.

그런 다음, 구글맵 사이트에서 주소를 검색하여 지도 공유 코드를 복사한 다음, HTML 코드로 추가하면 됩니다. 블록 에디터에서 HTML 코드로 추가하려면 사용자 정의 HTML 블록을 선택합니다.

사용자 정의 HTML 블록에 다음과 같은 형식으로 지도 공유 코드를 추가합니다.

<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3165.1062622773675!2d127.00489301541758!3d37.50541183538383!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca17ca5bcbcc5%3A0xe21243e195c38f39!2z7ISc7Jq46rOg7IaN67KE7Iqk7YSw66-464SQ!5e0!3m2!1sko!2skr!4v1592817756049!5m2!1sko!2skr" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

이제 지도가 반응형으로 제대로 표시될 것입니다.

CSS 코드 추가 작업은 한 번만 하면 되고, 구글 지도를 넣을 때에는 위와 같은 HTML 코드 형식으로 추가하도록 합니다.

참고로 일부 워드프레스 최적화 플러그인에서는 사이트 속도 향상을 위해 아이프레임 구글맵 기능을 비활성화하는 옵션을 제공할 수 있습니다. 지도가 표시되지 않으면 iframe 구글맵 기능이 비활성화되어 있지 않은지 체크해보시기 바랍니다.

예시:

참고

• 구글지도가 제대로 로드되지 않는 문제가 발생하는 경우 대처 방법