구글맵+로드맵 게시판을 구현해보자. 정보
구글맵+로드맵 게시판을 구현해보자.
본문
주의 사항.
1. 본 구글api 로드맵은 미국,일본,유럽등등은 구글맵과 로드맵이 구현되어있습니다만,
한국은 로드맵이 구현되어있지 않으므로, 한국 국내용으로는 쓸데없는 기능입니다.
2. 다음맵api는 국내 로드맵을 지원하지 않습니다.
아직 스킨으로 공개하지는 않습니다. 이유는 아직 제가 해둔것이 이용하거나, 입력하는데 크게 불편한것은 없지만, 아직 개발의 여지가 많습니다. (별로 개인적으로 쓰기에는 불편한것이 없어서 내벼두고 있는 중...나중에 생각나면..)
구글맵과 다음맵의 비교: 사실상 비교불가. 데이터양에서 압도적으로 구글맵이 우위.(미국 시골 골목까지 다 되어있다는) 한국제외
=====================================================================================
구글맵 api구현하기.
크게 3가지 방법이 있습니다.
1. 재대로 된 구현법 : 현재 사용, 지원하는 기능을 선별적으로 마음대로 사용
2. 쪼까 다른 코드로 된 구현법 : 제한이 많음. 일반 맵까지는되는데 위성은 아이콘으로만 구현.
3. 3party에서 구현해주는 ifram구현법: 기능은 좋은데...선별적 사용 불가.
위의 1번 2번 방법을 해볼까합니다.
2번 방법으로 하기.
http://www.openonweb.com/forumcontent/79
위의 사이트로 가서 따라하기 하면 됩니다. 좀 글이 딱딱하지만,
차근 차근 따라해보면, 위자드로 지정해주면, 관련소스 나옴.
이 방법은 맵이 나올부분에 위자드가 만들어주는 소스를 붙여주기만 해도 대충 나옴.
그런데, 맵코드가 호환이 좀 잘 안되던... 처음에 이 방법으로 했는데...
제한이 많이서 포기하였습니다.
그러나 사용설명이 잘되어있으므로 맛뵈기로는 괜찮습니다.
1번방법으로 구현하기 ( 구글맵+로드맵)
참조한 소스 페이지는
입니다.
여러가지 예제가 있습니다. 제가 참조한 부분은streetview-data.html 입니다.
(주의: 마우스 오른쪽 클릭이나, 소스보기하셔야, 전체내용이 나옵니다.)
--------------------------------------
(시작하기전에 개발여지가 많지만, 해둔데까지만 함. 조잡하다고 웃지 마시란것.)
먼저 제 홈피에 실제 사용 페이지 올려둘께여
(너무 많이 클릭하지마삼. 구글 api키 는 5만번 로딩입니다.키는 다시 등록받음 새로줌.)
-----------------------------시작--------------------
1. 지메일에 가입
2. 구글맵 api 키를 등록받음.
-----------여기까지 2번방법의 강좌를 참조해서 하시고._________
문제는 html인데 이걸 게시판으로 만드는게 문제겠죠.
저는 기존은 그누 보드의 파일은 만지지 않고, 스킨만으로 구현했습니다.
제목
내용
지도
순으로 만들었습니다.
문제는 2번째 방식은 body태그 구문에 적용없이, 바로 구현이 가능합니다.
그런데 1번째 방식은 body태그 구문에 소스와 같이 구현을 해줘야합니다.
또한 헤드의 자바스크립트 부분은 조정해야하는 부분이기때문에, 스킨쪽으로 땡겨와야합니다.
(자바스크립트는 굳히 헤드부분이 아니라도 구현된다는 점입니다.)
그래서 html소스와는 헤드 바디부분과는 달리.
일단, 게시판 설정에 헤드부분과 테일부분에 게시판에 원래 들어가는 대로 해줍니다.
1. 구글맵키를 헤드부분의 상단에 붙여줍니다.
2. body태그에 html소스와 동일하게 지정해줍니다.
(이 두부분은 개발여지가 있습니다..원래는 스킨쪽으로 땡겨와야하는데...ㅎㅎ)
write스킨과 view스킨파일중 중요한것은 역시 view파일 스킨입니다.
write스킨
대상 이름, 홈페이지,주소는 구글맵상 마커로 나타날 부분이고요,
위도 경도는 말그대로 위치정보이며, 지도 상하 좌우는 로드맵에서 최초에 나왔을때 어디를 보여줄것인지 수동으로 조절가능합니다. (학교를 보여줘야하는데 뒷쪽 언덕이 처음 나옴 곤란하잖수)
view스킨파일
(가장 중요한 부분입니다.)
게시판 내용부분 바로 다음에 보여줘야겠죠?
하여간 이것 다음에 아래 부분을 붙여줍니다.
원 html소스를 붙이고, 해당부분은 변수처리 하시면 되겠죠?
일단 원 소스를 봅시다.
주석으로 설명드릴께요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
//utf-8으로 설정되있군요.
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View Data Example</title>
//키값이 들어가 있습니다. 실제사용시에는 자신의 것을 바꿔줘야겠죠? v=2.x는 구글맵버전2란 것
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
//변수를 선언하였습니다.
var map;
var myPano;
var panoClient;
var nextPanoId;
//페이지 로딩시, 최초로 보여질부분의 설정입니다.
function initialize() {
var fenwayPark = new GLatLng(42.345573,-71.098326); //맵의 위도 경도 설정
var fenwayPOV = {yaw:370.64659986187695,pitch:-20}; // 로드맵의 회전과 상하 카메라지정
panoClient = new GStreetviewClient();
map = new GMap2(document.getElementById("map_canvas")); //맵을 뿌림.
map.setCenter(fenwayPark, 15); //위의 위도경도의 변수 지점을 화면의 센터로 놓고, 줌레벨은 15로 지정함(1-20으로 20이 가장 크로즈된것임)
GEvent.addListener(map, "click", function(overlay,latlng) {
panoClient.getNearestPanorama(latlng, showPanoData);
});
myPano = new GStreetviewPanorama(document.getElementById("pano"));
myPano.setLocationAndPOV(fenwayPark, fenwayPOV);
GEvent.addListener(myPano, "error", handleNoFlash);
panoClient.getNearestPanorama(fenwayPark, showPanoData);
}
function showPanoData(panoData) {
if (panoData.code != 200) {
GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
return;
}
nextPanoId = panoData.links[0].panoId;
//풍선글에 들어갈 배열값을 지정합니다.
var displayString = [
"Panorama ID: " + panoData.location.panoId,
"LatLng: " + panoData.location.latlng,
"Copyright: " + panoData.copyright,
"Description: " + panoData.location.description,
"Next Pano ID: " + panoData.links[0].panoId
].join("<br/>");
//클릭시마다 풍선박스뜨게하는 것
map.openInfoWindowHtml(panoData.location.latlng, displayString);
GLog.write('Viewer moved to' + panoData.location.latlng); //아마 쓸데없는 정보박스가 뜨게하는건데, 주석처리해두는게 좋음.
myPano.setLocationAndPOV(panoData.location.latlng);
}
//next버턴에 관한 것.
function next() {
// Get the next panoId
// Note that this is not sophisticated. At the end of the block, it will get stuck
panoClient.getPanoramaById(nextPanoId, showPanoData);
}
function handleNoFlash(errorCode) {
if (errorCode == 603) {
alert("Error: Flash doesn't appear to be supported by your browser");
return;
}
}
</script>
</head>
//바디에 위의 함수값을 지정하고, 내부 충돌을 피하기위해 GUnload로 청소를 해준다.
<body onload="initialize()" onunload="GUnload()">
//실제로 뿌려주는 부분에 아래태크 설치. 지도의 가로 세로 크기값
<div id="map_canvas" style="width: 500px; height: 400px"></div>
//로드맵을 뿌려고고,로드맵의 가로 세로 크기값.
<div name="pano" id="pano" style="width: 500px; height: 300px"></div>
//next버턴을 설치 (클릭하면, 도로를 따라간다. 갈림길에서 멈춤)
<input type="button" onclick="next()" value="Next"/>
</body>
</html>
-------------------------------------------------------------------------
실제 게시판에서는 위의 initialize()에 스킨에서 변수를 넘겨서 조정해줘야하는 부분이
거의 몰려있으므로, 실제로는 body태그를 먼저올려주고, 위의 함수는 스킨부분으로 가져온다.
이것 외에도, G-하이드, 위성맵을 지정해줘야하고,
maptype지정을 해줘야해요.
그리고 창이 나올껀데 보기 싫으면, 위에 소스중 한줄빼줘야해요.
아마 마커도 안나올껀데 그것도 봐서 지정해줘야해요..
그리고, 아마 에러 날껀데...(화면에 아무것도 안나오는..)
그누보드 view스킨 소스 제일 밑에 하고 충돌이 나는듯해서,
그부분은 주석처리해줬어요. 작동에서는 이상없어요.
제가 적용한 view스킨의 실제 내용은 다음과 같아요
wr7경우는 앞과 맨뒤로 지정해서, 지도를 사용할껀지 안할껀지해서,
사용으로 라디오 버턴을 클릭했을때만 나와요.
.. 최초에 설명한대로 구글키와 바디태그에 관련한것은 위의 소스와 같이,
게시판 설정의 헤드적는부분에 적어주시고, 나머지는 view스킨부분은 아래와 같이 조정했습니다.
<? if ($view['wr_7'] == "사용") { ?>
<!----------------------------------------------- 맵 스크립 ----------------------------->
<br /> <br />
<table width="614" border="0">
<tr>
<td width="37"><img src="../../../../images/icon2.jpg" width="24" height="24" /></td>
<td width="567" valign="top"><p><strong>아래 위성지도의 도로를 클릭하면, 그 밑에 거리 로드맵이 실시간으로 바뀌면서 <br />
380도로 보는게 가능합니다. 물론 로드맵으로 돌아다는것도 가능합니다.</strong></p></td>
</tr>
</table>
<script type="text/javascript">
var map;
var myPano;
var panoClient;
var nextPanoId;
function initialize() {
var fenwayPark = new GLatLng("<?=$view[wr_2]?>","<?=$view[wr_3]?>");
var fenwayPOV = {yaw:<?=$view[wr_9]?>,pitch:<?=$view[wr_10]?>};
panoClient = new GStreetviewClient();
map = new GMap2(document.getElementById("map_canvas"));
//추가
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// map.setCenter(new GLatLng(37.55938,126.97506),6);
map.setMapType(G_HYBRID_MAP); //맵종류
//추가끝
//map.setCenter(fenwayPark,13); //맵 중앙으로
var marker = new GMarker(fenwayPark, {draggable: false}); //마커
map.addOverlay(marker); //마커설정
map.setCenter(fenwayPark, <?=$view[wr_8]?>); // 최초 줌 레벨 설정
GEvent.addListener(map, "click", function(overlay,latlng) {
panoClient.getNearestPanorama(latlng, showPanoData);
});
myPano = new GStreetviewPanorama(document.getElementById("pano"));
myPano.setLocationAndPOV(fenwayPark, fenwayPOV);
GEvent.addListener(myPano, "error", handleNoFlash);
panoClient.getNearestPanorama(fenwayPark, showPanoData);
}
function showPanoData(panoData) {
if (panoData.code != 200) {
GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
return;
}
nextPanoId = panoData.links[0].panoId;
displayString = [
"위치명: " + "<?=$view[wr_4]?>",
"주소: " + "<?=$view[wr_6]?>",
// "Panorama ID: " + panoData.location.panoId,
"현재 도로: " + panoData.location.description,
"위도,경도: " + panoData.location.latlng,
// "Copyright: " + panoData.copyright,
// "Next Pano ID: " + panoData.links[0].panoId
].join("<br/>");
map.openInfoWindowHtml(panoData.location.latlng, displayString);
// GLog.write('Viewer moved to' + panoData.location.latlng);
myPano.setLocationAndPOV(panoData.location.latlng);
}
function next() {
// Get the next panoId
// Note that this is not sophisticated. At the end of the block, it will get stuck
panoClient.getPanoramaById(nextPanoId, showPanoData);
}
function handleNoFlash(errorCode) {
if (errorCode == 603) {
alert("Error: Flash doesn't appear to be supported by your browser");
return;
}
}
</script>
<div id="map_canvas" style="width: 600px; height: 350px"></div>
<div name="pano" id="pano" style="width: 600px; height: 300px"></div>
<input type="button" onclick="next()" value="Next"/>
<!----------------------------------------------- 맵 스크립 끝----------------------------->
<? }else{ }?>
시행착오를 격으면서 나온 대부분의 내용은 글 중에 다 있어요.
기본적으로 변수 넘기는 정도만 아셔도 만드는데는 크게 어려움이 없을줄 알아요.
6
댓글 5개
