구글 스트리트뷰를 이용해서 블로그에 움직이는 실사지도 삽입하기

저는 포스트에 종종 구글 스트리트뷰를 삽입하는데요. 기존에는 다음지도와 네이버지도를 사용한 적이 몇 번 있는데 모바일에서는 제대로 지원이 되지 않는 문제가 있어서 스트리트뷰가 제공되지 않는 곳을 제외하고는 가급적 구글지도의 스트리트뷰를 삽입하는 편입니다.

구글 스트리트뷰를 삽입할 때의 장점은 하나 더 있는데 모바일에서도 손가락을 이용해서 해당 장소의 360도를 확인할 수 있다는 점인데요. 특별히 저만 아는 건 아니라고 생각해서 그동안 별생각 없이 사용 중이었는데 블로거 로안씨님이 댓글로 문의를 주셔서 사용방법에 대해서 한번 작성해 보겠습니다.

 

먼저 구글지도로 접속을 한 후 찾고자 하는 위치를 검색해야겠죠. 저는 광화문광장을 검색해 봤어요. 세종대왕동상을 삽입해 볼게요.

 

광화문 광장을 검색하면 지도 중앙에 세종대왕동상이 보이죠. 저곳을 스트리트 뷰로 보려면 우측 하단의 노란 사람 아이콘을 이용하는데 마우스로 노란 사람 아이콘에 가지다 대면 저렇게 노란 사람 아이콘이 움직이며 반응을 합니다.

 

노란 사람 아이콘을 마우스로 끌어오면 구글 스트리트 뷰를 제공하는 곳들이 파란색 선으로 표시가 되는데 중간에 보이는 파란색 원은 차도가 아닌 인도나 건물 내부를 스트리트 뷰로 제공하는 곳이에요.

 

다행히 세종대왕동상 앞까지 스트리트 뷰를 제공을 해서 저는 여기 위치로 이동을 시켜봤어요. 자~ 그럼 이제 블로그에 해당 사진을 삽입하는 방법을 알아볼게요.

 

화면 좌측 상단에 있는 점이 세 개 있는 아이콘을 클릭하면 인쇄 / 문제 신고 / 이미지 공유 또는 삽입이라는 메뉴가 나타납니다. 여기서 이미지 공유 또는 삽입 메뉴를 클릭해 주세요.

 

그럼 이렇게 공유 창이 뜨는데 링크 보내기는 해당 사진의 URL이고 저희가 하려는 건 지도 사진 자체를 삽입하려고 하는 거니 지고 퍼가기 탭을 클릭할게요. 그럼 위와 같이 기본적으로 중간 크기의 지도 사진을 삽입할 수 있는 HTML 소스를 보여주는데요.

 

중간 메뉴를 클릭하면 기본적으로 작게는 가로 400 세로 300이 지도를, 중간은 가로 600 세로 450 사이즈로, 크게는 가로 800 세로 600 사이즈의 지도 사진을 퍼갈 수 있는 HTML 소스를 제공합니다.

 

물론 가장 하단에 있는 맞춤 크기를 클릭해서 원하는 사이즈 여기서는 블로그의 본문 가로폭에 맞춰서 입력도 가능하죠. 실제 크기 미리 보기 기능도 제공해서 입력한 사이즈의 지도 사진을 미리 확인도 가능합니다. 이렇게 복사한 아래의 HTML 소스를 블로그의 HTML 보기 화면에 

<iframe src="https://www.google.com/maps/embed?pb=!4v1539227212351!6m8!1m7!1s2MDxKPAbYt0AAAQINlNErg!2m2!1d37.57270733027273!2d126.9768531734151!3f353.03!4f1.0999999999999943!5f1.0867888227533573" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

붙여 넣으시면

 

이렇게 모바일에서도 움직이는 지도를 내 포스트에 삽입할 수 있게 됩니다. 그럼 오랜만에 IT블로거 다운 포스트를 작성한 담덕이었습니다. 

P.S. 라디오키즈님 보고 계시나요? ㅋㅋ