티스토리에 구글지도 넣는 법 (자세하고 쉽게 설명)

블로그 글을 쓰다보면 위치정보를 알려주기 위해 지도를 넣어야 하는 경우가 생기는데요. 티스토리에서는 지도넣는 기능이 없기 때문에 구글지도를 사용해 지도 넣는 법을 알아볼께요. 다음지도도 넣을수 있지만 다음지도는 우리나라 이외의 지역은 나오지 않기 때문에 구글지도를 기준으로 할께요. 아주 상세히 설명하니 차근차근 따라오세요.

 

1.구글에서 구글지도를 검색합니다. 

웹브라우저를 열고 구글이나 네이버등 검색 엔진에서 구글지도를 검색하고 구글지도를 클릭해서 실행을 합니다.

 

2. 검색할 위치를 구글지도에서 검색합니다. 

저는 인천공항주차장을 검색해 볼께요.

 

주차장이 여러곳이라 검색이 여러곳이 나왔는데요. 인천공항 처럼 유명한 지명이나 위치의 경우에는 크게 한가지가 먼저 검색 결과로 보여집니다. 

 

3. 검색결과에서 원하는 지역을 선택

여러 검색결과가 나온 인천주차장을 기준으로 원하는 위치를 선택해 클릭하면 상세 페이지 나옵니다. 저는 인천국제공항 제1여객터미널 장기 주차장을 선택했어요.

 

4. 공유버튼 클릭 후 팝업창에서 링크복사

상세 페이지 중간 부분에 공유 버튼(붉은색 박스)이 있는데요. 공유버튼을 클릭하면 팝업창이 나와요. 팝업창에는 '링크 보내기'와 '지도퍼가기'가 나오는 데요. 

 

 

링크보내기에서 링크를 복사해서 붙여넣으면 아래와 같습니다.

두둥~!!!!

 

https://maps.app.goo.gl/P56MMCBHdkZvNtVt5

인천국제공항 제1여객터미널 P1 장기주차장 · 인천광역시 중구 공항로 272

 

이렇게 이상하게 위치공유가 되네요. 클릭을 해서 보면 구글지도가 열리고 정확한 위치를 알수 있기는 하지만 이런 형태의 위치 공유를 원한건 아니었잖아요. 아주 깔끔하게 넣는 방법으로 다시 한번 시도해 볼께요. 

 

5. HTML모드로 코드 복사해 오기

깔끔하게 위치를 공유하기 위해서는 HTML 을 이용해야 하는데요. 지금 부터는 살짝 어려울 수도 있으니 잘 따라 오셔야 합니다. 아까 팝업창의 링크보내기가 아니고 지도퍼가기를 클릭합니다. 

 

아까와는 다르게 아래 지도도 나오고 중간에 HTML 코드도 보입니다. 그 옆에 는 HTML 복사 라는 파란색 텍스트도 있고요.파란글자(HTML 복사)를 클릭하면 코드가 복사가 됩니다. 이제 거의 다 왔어요 조금만 힘을 내 보세요. ^^

 

6. 블로그 글쓰기 창을 HTML모드로 변환

글을 쓰고있는 현재 창의 우측 상단의 기본모드 버튼을 클릭해서 기본모드 → HTML 로 변환 합니다.

 

7. HTML코드를 원하는 위치에 삽입

HTML을 원하는 위치에 복사해서 넣습니다. 여러 코드가 있어서 어려워 보이는 것 같지만 그렇지 않습니다.

지도 삽입 코드는 iframe 사이에 있는 코드 입니다. 

 

코드 사이의 한글을 기준으로 보시고 원하는 위치를 정해서 붙여넣기를 하면 아래 처럼 지도가 표시가 됩니다.

 

 

위 지도의 모양이 마음에 드시나요? 아직도 좀 깔끔하지가 않죠? 저도 그렇게 생각해요 블로그와 크기도 맞지가 않고 정렬도 왼쪽으로 되어있어서 정돈이 되지 않는 느낌이네요. 

 

8. 코드를 수정해서 정리

지도삽입 최고급 과정까지 왔네요. 이제 마음에 들지 않는 부분을 HTML코드를 수정해서 정리를 해볼께요. 

아래 코드가 삽입되어있는 지도의 코드인데요 

 

<p><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5175.757147075831!2d126.45444549646517!3d37.44413981545399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b9b4ef9fcbbe9%3A0xef931f53f9749d68!2z7J247LKc6rWt7KCc6rO17ZWtIOygnDHsl6zqsJ3thLDrr7jrhJAgUDEg7J6l6riw7KO87LCo7J6l!5e0!3m2!1sko!2skr!4v1700730579046!5m2!1sko!2skr" width="600" height="450" allowfullscreen=""></iframe></p>

 

지도의 가로길이는 width="600" 이부분을 수정하고요. 세로부분은 height="450" 를 수정해서 적용합니다. 

 

가운데 정렬을 하려면 제일 앞의 <p>코드 대신에 <div align="center">를 넣고 제일뒤의 </p> 대신에 </div>

를 넣으면 됩니다. 그렇게 해서 최종을 수정된 코드는 아래와 같습니다. 아래코드를 다시 복사해서 HTML에 붙여넣으면 위에 있는 지도보다 조금더 정리된 형태의 지도가 나오게 됩니다. 

 

저는 가로를 100%로 바꿔서 꽉차게 했고요. 세로를 400으로 변경해서 가운데 정렬로 수정을 했습니다. 코드상에서 길이 조절은 픽셀값을 직접 넣는 방법과 전체 프레임에서 차지하는 비율을 %로 적용을 하는 방법이 있습니다. 

 

여기 까지 잘 따라오셨으면 지도 삽입하기는 이제 끝이네요. 

다음에 유용한 팁이 있으면 다시 돌아올께요~!!