티스토리 블로그에 구글맵 지도 넣는 방법과 꿀팁

오늘은 티스토리 블로그에 구글맵 지도 넣는 꿀팁을 알려드리도록 하겠습니다.

제가 여러 방법을 시도해봤는데 구글맵과 네이버 지도는 넣을 수 있지만 카카오 맵은 현재 넣을 수 있는 방법이 없습니다. 혹시 아시는 분은 댓글로 좀 알려주세요.

자 그럼 지금부터 이렇게 포스팅에 지도를 첨부하는 방법부터 첨부할 때 꿀팁까지 알려드릴 테니 꼭 끝까지 읽어주세요.

일단 우리는 구글맵을 가져올 거기 때문에 구글 홈페이지를 열어주세요.

그리고 이렇게 내가 첨부하고 싶은 곳을 검색해줍니다.

그러면 일반적으로 우측에 지도 모양이 표시가 되는데 이렇게 간혹 유명한 곳은 표시가 안 됩니다.

그런데 이런 경우 밑에 보면 이런 식으로 정보가 뜨는데 이쪽으로 들어가면 우리가 원하는 공유하기 기능을 찾을 수가 없습니다. 그래서 한참 헤매다가 그냥 포기하게 되는 경우가 많은데 여기서 이쪽으로 가지 않는 게 좋습니다.

자 그러면 어떻게 해야 되냐 하는지 알려드리겠습니다.

제가 표시해놓은 것처럼 메뉴 중에 지도라는 버튼을 클릭해서 들어가는 것이 중요한 포인트입니다.

그러면 이런 화면이 나옵니다. 이렇게 관련된 장소가 리스트로 나오는데 내가 첨부하고 싶은 곳을 찾아야 합니다.

그리고 찾았으면 제가 표시해둔 저 부분을 클릭해줍니다. 오른쪽에 웹사이트나 경로 이런 버튼은 클릭하시면 안 됩니다.

그러면 이런 화면이 나오는데 제가 표시해둔 것처럼 저기 보이는 공유 버튼을 클릭해 줍니다.

그러면 이렇게 또 새로운 창이 뜨게 되는데 여기서 저기 보이는 링크 복사를 누르시면 안 됩니다.

옆에 보이는 저 지도 퍼가기라는 버튼을 클릭해줍니다.

그러면 이렇게 엄청 긴 HTML 코드가 나오게 됩니다. 저걸 복사해 가야지만 티스토리 블로그에 포스팅하실 때 구글맵을 첨부할 수가 있습니다.

그러면 저기 보이는 링크를 클릭해서 복사해도 되지만 혹시나 빠뜨리는 코드가 있을 수 있기 때문에 우측에 제가 표시해 둔 HTML복사라는 버튼을 클릭해주면 자동으로 클립보드에 복사가 됩니다.

여기까지 하셨으면 이제 다시 내가 작성 중이던 포스팅으로 돌아와야 합니다.

이렇게 작성 중이던 페이지를 열어줍니다. 임시저장을 해놓으셨던 것을 불러와도 좋고 아예 새로 창을 띄어 놓고 구글 검색을 하시면 편하게 돌아올 수가 있습니다.

하지만 에디터에는 아무리 찾아봐도 지도를 첨부하는 메뉴는 없기 때문에 저기 제가 표시해둔 기본 모드라는 버튼을 클릭해줍니다.

그러면 역시나 지도 첨부 메뉴는 나오지 않습니다. 하지만 실망하시지 않으셔도 됩니다.

티스토리 블로그에 구글맵 지도 넣는 방법을 여기까지 와서 포기할 수 없습니다. 여기에 기본 모드, 마크다운, HTML이라는 메뉴가 나오는데 여기서 제가 표시해뒀던 HTML이라는 버튼을 클릭해줍니다.

그러면 이렇게 화면이 까맣게 바뀌고 이상한 세계로 들어오게 됩니다. 그냥 느낌이 별로 알고 싶지 않은 세계이고 당장이고 나가고 싶은 세계이지만 저희는 티스토리 블로그에 구글맵 지도 넣는 방법을 배우려면 그 마음을 이겨내야 합니다.

여기서 내가 대충 썼던 글을 참고해서 지도가 들어가야 할 위치를 잡아줍니다. 넣고 싶은 곳에 가서 엔터 치면 됩니다.

거기에다가 ctrl+v를 눌러줍니다. 그러면 아까 저희가 구글 사이트에서 퍼왔던 코드가 붙여 넣기 됩니다. 무슨 말인지 모르셔도 됩니다. 그냥 저 긴 이상한 코드가 우리 블로그에 지도를 보여주는 코드라는 것만 알고 계시며 됩니다.

자 그리고 다시 저기 위에 제가 표시해둔 것처럼 HTML이라는 버튼을 눌러서 다시 기본 모드를 클릭해주면 이 이상한 세계에서 빠져나올 수 있습니다.

그러면 이렇게 길고 긴 역경을 거쳐서 티스토리 블로그에 구글맵 지도가 들어가진 모습을 볼 수 있습니다.

자 여기까지가 티스토리 블로그에 구글맵 지도를 넣는 방법을 배워봤는데요. 제가 서두에 말씀드린 것처럼 꿀팁을 2가지 알려드리도록 하겠습니다.

일단 첫 번째 꿀팁은 제가 지금 설명한 방법대로 하면 구글맵이 엄청 넓은 화면으로 보여 지기 때문에 제 포스팅을 방문한 사람들이 한 번에 정보를 얻기가 어렵습니다.

요딴식으로 나옵니다. 그래요 서울에 있다는 건 알겠습니다. 하지만 무슨 역에서 가까운지 어느 방향으로 가야 하는 건지 알기가 어렵겠죠. 물론 방문하신 분이 지도를 확대하면 확대하고 줄이고 그런 것은 가능합니다. 하지만 아무래도 불편한 건 맞으니까요.

그래서 좀 더 확대된 구글맵을 포스팅에 심고 싶으시면 제가 표시해둔 것처럼 검색하신 다음에 저기 플러스 버튼을 눌러서 포스팅에 들어가면 좋을 정도의 척도를 맞춰놓으시고 공유 버튼을 눌러주시는 것이 중요합니다.

티스토리 블로그에 구글맵 지도 넣는 방법의 첫 번째 꿀팁입니다.

그리고 두 번째 꿀팁은 HTML이라는 버튼을 누르고 들어가서 코드를 붙여 넣기 하면 일반적으로 600의 사이즈로 지도가 표시되게 세팅이 되어있습니다. 그런데 요즘엔 피씨로도 보는 사람이 있고 테블릿으로도 보는 사람이 있고 핸드폰으로 보는 사람이 있는데 저 사이즈가 지정되어 있으면 특정 환경에서는 보기가 불편할 수 있습니다.

그래서 제가 별표해둔 것처럼 저 부분을 100%라고 글자를 바꿔주면 어떤 디바이스에서든지 꽉찬 비율로 지도를 볼 수 있게 해줍니다. 그러면 방문해서 보는 사람들도 훨씬 보기가 편하겠죠?

이게 티스토리 블로그에서 구글맵 지도 넣는 방법 두번째 팁이었습니다.

오늘은 포스팅 내용이 길었지만 그만큼 제가 많이 해메던 부분이라 상세히 설명을 드리고 싶었습니다. 컴퓨터를 정말 몰라도 할 수 있게 이렇게 꼼꼼히 알려주는 블로그는 없었던 것 같아서 제가 긴 글을 써봤습니다.

오늘도 즐거운 하루되세요!
감사합니다~