티스토리 지도 첨부 크롬 오류, 구글 지도 반응형
최근에 블로그 테마를 살펴보면 여행, 맛집 블로그의 인기가 올라가는 추세입니다. 특히나 요즘처럼 집콕하는 시간이 많아지는 상황에서는 랜선 여행, 맛집 투어, 요리 등의 주제를 통해 아쉬운 마음을 달래보고자 관련 키워드 검색을 자주 하는데요. 저 또한 해외에서 생활하는 기간이 길어지다 보니 유명세를 타지 않은 싱가포르 로컬 숨은 맛집을 소개하는 카테고리를 생성하게 되었습니다.
이번 포스팅에서는 지도 첨부하는 방법과 그에 따른 구글 크롬 오류 해결 방법에 대해서 공유해보려고 합니다.
여행 정보, 맛집 소개와 같은 주제를 다루다 보면 주소와 위치 정보는 필수입니다. 국내 위치 정보는 네이버와 다음에서 제공하는 지도 서비스를 이용하시면 되고 해외 위치 정보는 구글 맵 사용을 추천드립니다.
크롬 브라우저 오류 해결 방법
구글 크롬 사용 시 발생하는 오류 현상을 바탕으로 작성된 포스팅이니 참고하세요.
티스토리 글쓰기 에디터(신에디터)의 지도 아이콘을 클릭합니다.
찾고자 장소를 검색한 후 첨부 아이콘을 클릭합니다.
정상적인 경우라면 글쓰기 창에 검색한 장소의 지도가 출력되어야 합니다. 아래 화면처럼 블로그 관리 홈의 글 관리 리스트가 출력된다면 아래 방법에 따라 설정을 변경해 주세요.
오류 해결을 위해 크롬 브라우저 주소창에 아래와 같이 입력합니다.
chrome://flags/#same-site-by-default-cookies
SameSite by default cookies 값을 Disabled로 선택한 후 Relaunch를 클릭합니다.
크롬 브라우저를 다시 실행한 후 지도 넣기를 하면 글쓰기 창에 정상적으로 맵이 출력되는 것을 확인할 수 있습니다.
구글 맵을 이용한 해외 지도 첨부하기
구글 맵에 접속합니다. 찾고자 하는 위치를 검색한 후 공유를 클릭합니다.
지도 퍼가기 탭에서 HTML 복사를 클릭합니다.
글쓰기 에디터의 기본 모드를 HTML로 바꿔줍니다.
지도 퍼가기에서 복사한 HTML 코드를 추가하고자 하는 라인에 붙여 넣습니다.
글쓰기 모드를 기본 모드로 변경하시면 첨부된 지도를 확인할 수 있습니다.
지도 중앙 정렬 설정하기
구글 맵 첨부 시 좌측 정렬이 기본입니다. 화면 중앙에 위치시키려면 중앙 정렬로 바꿔주셔야 합니다.
글쓰기 에디터를 HTML 모드로 바꾸신 후 중앙 정렬을 위한 추가 코드를 삽입해 줍니다.
iframe 태그를 기준으로 위쪽 라인과 아래쪽 라인에 아래와 같이 div 태그를 넣어줍니다.
<div align="center"> ← 위쪽 라인
<iframe>
.
.
.
</iframe>
</div> ← 아랫쪽 라인
div 코드 삽입 후 기본 모드로 변경하면 아래와 같이 중앙 정렬로 바뀐 것을 확인할 수 있습니다.
반응형 사이즈 설정하기
지도 퍼오기 HTML 코드의 width, height 값을 아래와 같이 변경해줍니다.
width="100%" height="auto"
반응형으로 적용되어 PC 또는 모바일 환경에 따라 자동으로 사이즈가 변경됩니다.
PC<width="100%" height="auto">
모바일<width="100%" height="auto">
PC<width="100%" height="450px">
모바일<width="100%" height="450px">
이처럼 Google Map은 지도 사이즈와 정렬 위치를 원하는 옵션으로 자유롭게 변경 가능할 뿐만 아니라 여러 가지 편리한 기능을 제공하고 있습니다.
여행 계획표 짜기, 맛집 투어 하기 등 액티브한 활동을 하기 위한 목적이라면 주변 둘러보기 메뉴를 100% 활용하는 것도 좋은 방법입니다. 또한 글쓰기 소재가 필요할 때도 잘만 활용하신다면 더욱더 재미있고 다이내믹한 아이디어를 얻을 수 있으니 Google Map을 적극 활용하시기를 추천드립니다.
구글 지도 활용하는 팁은 월간 오마카세님께서 힌트를 주셨어요. 오마카세님 블로그는 초밥 사랑이 넘치는 글들이 주를 이루며 일식 이야기와 맛집 소개를 다루고 있습니다. 초밥 즐기시는 분들이라면 흥미로운 내용들이 많으니 방문해보시면 좋을 듯 합니다.
월간 오마카세 방문하기