① 구글지도 검색
구글지도에서 업체명 혹은 주소 입력으로 검색 후에 원하는 위치에 마커가 표시된 경우 빨간 마커 부분을 클릭합니다.
② 공유 버튼 클릭
화면 왼쪽의 버튼 중 “공유” 버튼을 클릭합니다
③ 지도 퍼가기 클릭
공유 버튼 클릭하면 중앙에 공유 팝업 창이 뜨는데 상단 메뉴에서 “지도 퍼가기” 버튼을 클릭 후 “HTML 복사” 버튼을 클릭합니다.
④ 페이지에 붙혀넣기
지도를 추가하고자 하는 페이지에서 구텐베르그의 “사용자 정의 HTML” 블럭을 추가하고 해당 부분에 복사한 내용을 붙혀넣기 해 줍니다.
⑤ 소스 수정
HTML 그대로 붙혀넣기 한 경우 좌우 폭이 전체 블록의 크기가 아닌 일정한 사이즈(600px)로 나올 경우에는 html 소스를 수정해서 원하는 사이즈로 수정할 수 있습니다.
아래와 같이 width=”600″ 부분을 찾아서 width=”100%” 로 수정합니다.
높이를 변경하기 위해서는 height=”450″ 부분에서 450 값을 원하는 값으로 수정하여 사용할 수 있습니다.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3160.3594456833303!2d126.9031163764621!3d37.617231921218576!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca47b5454c09f%3A0x6f6b638d6261c260!2z7YG065287Jqw65Oc7Y-0642U!5e0!3m2!1sko!2skr!4v1719120452712!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3160.3594456833303!2d126.9031163764621!3d37.617231921218576!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca47b5454c09f%3A0x6f6b638d6261c260!2z7YG065287Jqw65Oc7Y-0642U!5e0!3m2!1sko!2skr!4v1719120452712!5m2!1sko!2skr" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>⑥ 결과물 확인
블록의 “미리보기” 버튼을 통해서 사이트 내에 어떻게 지도가 표시되는지 확인 합니다.
모든 작업이 안료되면 반드시 화면 우측 상단의 “업데이트” 버튼을 클릭하여 수정한 내용을 업데이트 해야 정상적으로 사이트에 적용 됩니다.
