워드프레스 뉴스페이퍼 테마에 구글 지도 삽입하는 방법

워드프레스 정보를 제공하는 블로그 Avada 2022. 3. 15. 21:00 • 댓글: 개

워드프레스 뉴스페이퍼 테마에 구글 지도(Google Map)를 삽입하는 방법에 대해 살펴보겠습니다. 일부 유료 테마나 엘리멘터 페이지 빌더에서는 구글 지도를 삽입할 수 있는 요소나 위젯을 제공하지만, Newspaper 테마에는 구글맵 삽입을 위한 별도의 요소나 모듈을 제공하지 않으므로 구글 지도 임베드 HTML 코드로 삽입하거나 플러그인을 사용할 수 있습니다.

워드프레스 뉴스페이퍼 테마에 구글 지도 삽입하는 방법

1. 먼저 구글맵 사이트에서 공유를 원하는 주소를 입력하고 "공유" 버튼을 누른 다음, 공유 창에서 지도 퍼가기를 선택하고 HTML 복사를 클릭하여 구글 지도 임베드 코드를 복사합니다.

자세한 방법은 다음 글을 참고할 수 있습니다.

블로그에 구글맵 삽입하기 - 워드프레스 정보꾸러미

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

www.thewordcracker.com

2. 지도를 반응형으로 추가하기 위해 다음 CSS 코드를 외모 > 사용자 정의하기 > 추가 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;
}

위의 코드는 유튜브 동영상 등을 iframe으로 삽입할 때에도 사용할 수 있습니다.

이 작업은 한 번만 하면 됩니다.

3. 뉴스페이퍼의 tagDiv Composer를 사용한 페이지 편집 화면에서 좌측 패널의 요소 추가(Add) 탭을 클릭하고 raw html을 검색한 다음, Raw HTML 요소를 원하는 곳으로 끌어다 놓습니다.

4. Raw HTML 요소에 구글 지도 임베드 코드를 다음과 같은 형식으로 입력합니다.

<div class="map-responsive">
// 구글지도 임베드 HTML 코드
</div>

예시:

<div class="map-responsive"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25303.027742922077!2d126.95495239289146!3d37.557927014302855!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca2f332cb082b%3A0xe92b70ac420cf0a8!2z7ISc7Jq47Yq567OE7Iuc7LKt!5e0!3m2!1sko!2skr!4v1647344828007!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div>

아래 그림과 같이 추가하시면 됩니다.