테터에 구글맵을 붙이려고 테터 소스를 많이 뒤져봤습니다.[--;;; 많이는 아니구요]
찾아보던 중 구글맵을 붙이기 위해서 몇가지 문제점(? 제약사항이라고 할수도..)을 발견했습니다.
1. 테터에서 본문중에서 script 태그 지원을 하지 않습니다.테터가 문제가 있다는 것은 절대 아닙니다.!!
2. 구글맵을 사용하기 위해서는 발급받은 Google Map Key를 HTML Header에 추가해야 합니다.
3. 테테에서 헤더(<html><head></head></html>을 생성하는) 를 생성하는 코드가 따로 존재하지 않습니다.헤더는 각각의 에디터나 파일들이 모두 가지고 있으며(EAF 프레임웍에서 빌드시 자동으로 완성된 헤더코드를 모든 html 또는 php 파일에 넣어주는 것으로 생각됩니다.)
언제나, 잔머리를 잘굴리는 '옷장수'로서는 다음과 같은 방법으로 붙여보았습니다.
- 구글 맵 키를 먼저 발급 받습니다.
[Google Maps API에서 발급 받습니다.] - 헤더가 들어있는 모든 파일들을 검색해서 다음의 코드를 삽입합니다.
<script src="발급받은 Google Map 키를 넣습니다." type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function onLoad() {
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(127.544,37.329), 15);
}
}
//]]>
※ 귀찮으시면 2번은 생략해도 됩니다. 에디터 창에서 구글맵이 안보일 뿐입니다. - 테터에서는 블로그의 내용이 생성되어 다른 사람에게 보일 때 최종적으로 Skin 파일의 HTML 구조 안으로 삽입되게 됩니다. 따라서~ 테터의 스킨관리 페이지로 들어가서 스킨 편집을 눌러서 2번에 입력했던 코드를 다시 삽입합니다.
- 코드의 의미는 다음과 같습니다.
//이코드가 존재하는 HTML 페이지가 로딩될 때 다음의 코드를 실행합니다.
function onLoad() {
//Google Map이 지원하는 브라우져인지 체크를 합니다.
if (GBrowserIsCompatible()) {
//구글맵의 모든 기능을 지니는 GMap 클래스('map' id를 지닌)를 생성합니다.
var map = new GMap(document.getElementById("map"));
//구글맵을 상하좌우로 이동시킬 수 있는 컨트롤을 추가합니다.
map.addControl(new GSmallMapControl());
//구글맵을 MAP, SATELITE, HYBRID 형태로 설정하는 컨트롤을 추가합니다.
map.addControl(new GMapTypeControl());
//맵이 다음의 GPoint(위도,경도)를 중앙에 위치시키도록 설정합니다. 15는 depth
map.centerAndZoom(new GPoint(127.544,37.329), 15);
}
} - <div></div>태그를 사용하여 맵을 추가합니다. 이 때 HTML코드를 삽입해야하므로 HTML 모드에서 추가해야하며, 앞의 자바스크립트 코드에서 정의하였던 'map' 아이디를 추가하는 것도 잊으시면 안됩니다.
<div id="map" style="width: 500px; height: 300px"></div>
가장 안좋은 점은 구글맵 자체에서 한국 지도는 매우 허접으로만 제공하기 때문에 붙일만한 가치가 별로 없었다는 점입니다. --;;;; 크~
구글 맵 API documentation이구요. 여기 예제를 사용했습니다.
http://maps.google.com/apis/maps/documentation/#Introduction
초기값으로 지역도 설정할수 있지 않나요?
답글삭제당연히 있습니다. 위치도 표시가능하고 줌도 가능하죠. 그런데 테터에서 Script를 붙이는게 좀 애매해서 가장 쉬운 것만 해봤어요.
답글삭제일본지역만 유독 자세하게 나온 이유는 국가설정 탓인가요?
답글삭제국가설정 같은 것을 따로 하지는 않았구요. Google Map에서 제공하는 지도에서는 미국하고 일본 지도만 자세하게 제공을 하는 것 같았습니다. 제휴한 곳이 미국하고 일본만 한게 아닐까요? 정확한 이유는 저도 잘 모르겠네요 ^^;;;
답글삭제