[스크랩] 구글 블로그(blogspot.com)에 지도 추가하기

구글 블로그: 블로그에 지도 추가하기

이 블로그에서 소개하고 싶었던 내용이 맛집, 자전거 여행이 있다 보니, 글에 지도가 빠질 수 없다는 사실을 깨닫게 되었습니다. 구글 블로그에 구글지도, 네이버, 다음지도를 넣는 방법을 알아보겠습니다. 미리보기 버전 (클릭후 지도 사이트에서 조정) 과 확대 축소가능한버전 두 가지를 모두 고려해보겠습니다.

@Mary Anne Enriquez, Flickr

1) 구글 지도 추가하기

- 네이버 블로그에서 네이버 지도를 추가하는 것은 자체 탬플릿 제공이 되고,
다음 블로그에서 다음지도를 추가하는 것도 자체 탬플릿이 제공되는데,
구글 지도를 추가하는 것도 당연히 탬플릿이 제공될 것이다. 라고 생각했지만 ^^;;

편집창 측면의 위치좌표를 추가한다고 해서 딱히 지도가 추가되지는 않네요. 
기본 템플릿에서는 차이가 있을수 있지만, 역시 여기서는 변화가 없음. 그냥 현재 템플릿엣쓸모없는 기능이군요.

이 블로그 테마에서는 딱히 효과없음..

자, 구글 맵스로 가서 지도를 추가해 보겠습니다. 

http://maps.google.com 로 이동합니다. 
예제로 대전 정부청사를 검색을 해봅니다.
잘보면, 왼쪽에 share가 있는데요.
share를 누르면 link와 embed 코드가 나옵니다.

Embed map 의 html을 가져옵니다.

코드:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3212.9783085552353!2d127.38266331470697!3d36.36130429998235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3565497d0519e055%3A0x11bd11dbdbcdd041!2z64yA7KCE7KCV67aA7LKt7IKs!5e0!3m2!1sen!2skr!4v1446391983048" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>


코드를 따왔으면 왼쪽 상단에 글쓰기 /HTML 버튼을 누르고, 적당한 위치에 삽입!
(참고로 <br>은 줄변경-엔터 입니다)
지도 사이즈를 조절하려면 width 와 height는 수정하면 됩니다.
기본은 600 x 450 이네요.

<기본 붙여넣기 사이즈: 600 x 450>

<2/3 축소 붙여넣기 사이즈: 400 x 300>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3212.9783085552353!2d127.38266331470697!3d36.36130429998235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3565497d0519e055%3A0x11bd11dbdbcdd041!2z64yA7KCE7KCV67aA7LKt7IKs!5e0!3m2!1sen!2skr!4v1446391983048" width="400" height="300" frameborder="0" style="border:1" allowfullscreen></iframe>

(저는 이 사이즈가 맘에 드네요 ~)

기본 세팅은 지도 위에서 마우스 휠을 올리면, 자동 줌 인/아웃이 됩니다.
가령, 마우스 휠을 돌리다가, 지도안에 마우스가 들어가면 휠돌렸을대, 줌인/줌아웃이 되는 것이죠.

이 기능이 작동하지 않게 하는 방법은 기본적으로는 없는 것같네요. 헐

최대한 찾아봤는데요.
HTML안의 자바 스크립트를 건드는 방법밖에 없는듯..
쉽지 않네요..

2) 네이버 지도, 다음 지도 설정하기  

네이버 지도를 추가하는 방법은
1) http://map.naver.com/ 에서 원하는 지역의 HTML 소스를 퍼온다.
2) 오른쪽 옆부분의 클립모양 아이콘을 누른다.
3) HTML 태그를 복사하고 붙여넣기 한다.

4) 네이버 지도 적용 결과물

2015.11.6 | 지도 크게 보기 ©  NAVER Corp.

어째서인지 장소 B 를 누르고 링크를 땄는데 그냥 지도화면이 저장된 기분이네요 (ㅜㅜ)

HTML 태그 편집기 및 미리보기 를 눌러서, 원하는 위치로 수정해서 HTML을 저장할 수 있는데, 역시 장소 마크가 색이 변한다던지 하지는 않네요. 다만 고정된 지도라서 크게 보려면 지도 하단의 링크를 클릭해야 합니다.

간혹, 노란 화살표로 장소가 표현된 보여진 네이버 지도들이 있는데, 그건 네이버 블로그 자체에서 제공하는 기능 같습니다.  

다음 지도를 추가하는 방법은
1) http://map.daum.com/ 에서 원하는 지역의 HTML 소스를 퍼온다.
2) 상단의 공유를 누르고, 지도 퍼가기를 누른다.

3) 지도 퍼가기에서 HTML을 복사하고 붙여넣기 한다.

4) 다음지도 HTML 적용 결과물

지도를 클릭하시면 위치정보를 확인하실 수 있습니다.

역시 네이버와 마찬가지로 그냥 지도가 저장되네요. 

고정된 미리보기 지도이고 눌렀을때 커집니다. 

결국 제가 원하는 장소를 정확히 지정하려면

구글 블로그에서는 구글 지도를 써야 하나 봅니다..

뭔가 아쉽습니다 ㅎㅎㅎ