[참고 : 다음 지도 API가 카카오 지도 API로 바뀌었다. 그래서 아래와 거의 비슷한 내용을 카카오 지도 API를 이용해서 다시 작성하였다. "주소를 이용하여 다중 마커와 다중 인포윈도우 표시하기(Kakao 지도 API)" ]
다음 지도 API를 이용하여 다중 마커(multi marker)와 다중 인포윈도우(infowindow) 표시하기
지도에 주소를 표시하기 위하여 다음 지도 API를 이용하기로 하였다.
많이 사용하는 지도 API는 네이버, 다음, 구글일 것이다. 우선 구글을 선택안한 이유는 구글 위성 지도가 내겐 구려 보이기 때문이었다. 그리고 네이버와 다음 중 다음을 선택한 이유는 평상시 내가 다음 지도를 자주 사용하였기 때문이다.
API를 적용하는데 네이버가 좋은지 아니면 다음이 좋은지는 모르겠다. 그러나 생각없이 그냥 인터넷에서 소스를 카피해서 개발할 사람은 구글을 사용하기 바란다. 구글은 apikey를 요구하지도 않고 다양한 예제가 많다.
다음 지도 API를 이용하여 다중 마커 표시 예제를 찾아 보려고 했지만 찾아 볼 수가 없었다. 다음 개발자 네트워크가 다음 지도 API를 공개해서 매우 고맙지만 한편으론 그렇게 많은 사람들이 다중 마커 예제를 찾고 있음을 알면서도 예제를 보여 주지 않는 것은 전문 개발자들의 오만처럼 보였다. 전문개발자들이야 다음 지도 API 레퍼런스만 보여 주면 척척 개발하겠지만 나같은 컴퓨터 초보들은 어떻게 알겠는가. 전문가에게 간단한 자바스크립트 소스가 나같은 사람들에겐 무척이나 어려운 것을...
<!DOCTYPE html>
<html>
<head>
<title>다중 마커와 다중 인포윈도우 예제</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
h1 { text-align : center}
#map { width: 90%; height: 80%; border : solid blue ; margin-left:auto; margin-right:auto }
</style>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=다음지도APIKEY"></script>
<script type="text/javascript">
window.onload = function() {
// 지도의 중심
var position = new daum.maps.LatLng(38.3724912, 128.7065569);
// 기본 지도 표시
var map = new daum.maps.Map(document.getElementById('map'), {
center: position,
level: 12,
mapTypeId: daum.maps.MapTypeId.ROADMAP
});
// 지도 콘트론 표시
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
var mapTypeControl = new daum.maps.MapTypeControl();
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
// 다중 마커와 인포윈도우 표시
//위치 정보와 인포윈도우에 표시할 정도
var locations = [[38.3724912,128.4143097,'1번'],
[37.6732922,128.7065569,'2번']];
for(i = 0; i < locations.length; i++) {
// 다중 마커
var marker = new daum.maps.Marker({
position: new daum.maps.LatLng(locations[i][0], locations[i][1])
});
marker.setMap(map);
//인포 윈도우
daum.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var infowindow = new daum.maps.InfoWindow({
content: '<p style="margin:7px 22px 7px 12px;font:12px/1.5 sans-serif">' + locations[i][2] + '</p>',
removable : true
});
infowindow.open(map, marker);
}
})(marker, i));
}
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
위에서 다음 API 키만 바꾸어 주면 된다. 내 피시에서 열면 다음과 같다.
문제는 아마도 동적으로 홈페이지를 생성할 것으므로 이것과 asp, php, jsp 등과 합칠 것이다. 아래는 php 예제이다.
<?php
include('../include/db_config.php');
//사용자 latitude와 longtitude를 리턴
function GetLatLng() {
global $dsn;
$db = DB::connect($dsn);
if (DB::isError($db)) {
die ($db->getMessage());
}
$db->setFetchMode(DB_FETCHMODE_ASSOC);
$sql = "SELECT * FROM users";
$res = $db->query($sql);
// Always check that $result is not an error
if (DB::isError($res)) {
die ($res->getMessage());
}
for ($i = 1; $i <= $res->numRows(); $i++) {
$row = $res->fetchRow();
if ($i > 1) echo ",";
echo "[". $row['latitude'] . "," . $row['longitude'] . ",'" . $row['name'] . "']" ;
}
$res->free();
$db->disconnect();
}
?>
<!DOCTYPE html>
<html>
<head>
<title>예제</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
h1 { text-align : center}
#map { width: 90%; height: 80%; border : solid blue ; margin-left:auto; margin-right:auto }
</style>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=다음지도apikey"></script>
<script type="text/javascript">
window.onload = function() {
// 지도의 중심
var position = new daum.maps.LatLng(35.95, 128.25);
// 기본 지도 표시
var map = new daum.maps.Map(document.getElementById('map'), {
center: position,
level: 12,
mapTypeId: daum.maps.MapTypeId.ROADMAP
});
// 지도 콘트론 표시
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
var mapTypeControl = new daum.maps.MapTypeControl();
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
// 다중 마커 표시
// 다중 마커 정보
var locations = [
<?php
GetLatLng();
?>
];
for(i = 0; i < locations.length; i++) {
// 마커
var marker = new daum.maps.Marker({
position: new daum.maps.LatLng(locations[i][0], locations[i][1])
});
marker.setMap(map);
//인포 윈도우
daum.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var infowindow = new daum.maps.InfoWindow({
content: '<p style="margin:7px 22px 7px 12px;font:12px/1.5 sans-serif">' + locations[i][2] + '</p>',
removable : true
});
infowindow.open(map, marker);
}
})(marker, i));
}
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
위 예제의 문제점은 미리 표시할 좌표를 어딘가에 저장해 두어야 한다는 것이다. 그래서 아마도 주소를 좌표로 바꾸어 주는 뭔가를 찾을텐데 다음 주소->좌표변환 API가 있다. 그런데 이것도 골 때린다.
다음 홈페이지에 예제라고 나온 것이 위와 같다. 이걸 보고 한참 생각했다. 어떻게 하라는 얘기지??? 이렇게 하는 것이다.
http://apis.daum.net/local/geo/addr2coord?apikey=DAUM_LOCAL_DEMO_APIKEY&q=서울특별시 중구 세종대로 110&output=xml
위에서 APIKEY는 다시 발급을 받아야 한다. 지도 APIKEY가 아니라 로컬 APIKEY이다. 이것 때문에 30분간 헤맸다. 위 주소를 브라우저에 주소에 복사한다.
그렇다. 프로그램 내에서 위 주소를 다음 서버로 보내면 다음에서 XML이나 JSON형태로 답을 한다. 프로그램에서 그걸 받아서 XML을 파싱해서 즉 위도와 경도를 뽑아 내서 지도 위에 뿌려 주어야 한다. 난 XML을 파싱할 줄 몰라서 안 했다. 누가 php로 하는 법을 알려 주면 좋겠다. 하지 않은 이유는 또 있다. 이게 진짜 이유다
http://apis.daum.net/local/geo/addr2coord?apikey=다음로컬APIKEY&q=서울특별시청&output=xml 를 브라우저 주소창에 넣어 보자.
꼭 지번 또는 길번호 체계로 넣어 주어야 한다. 예를 들어 우리는 주소 쓰다가 대충 아파트이름을 넣는다. 그러면 모른다고 발뺌한다. 그런데 구글의 geocoding service는 다르다.
https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple?hl=ko
구글이 제공하는 geocdoing 예제 사이트이다.
구글 geocoding service는 서울특별시청을 찾아 낸다. 주소를 좌표로 바꾸어서 지도에 표시하려는 사람은 구글 geocoding service를 고려해 보기 바란다. 난 xml이나 json 파싱을 어떻게 하는 몰라서 안 하지만 잘 아는 사람이 성공하면 보여 주길 바란다.
그래서 난 일일이 주소 보고 좌표 찾아서 데이터베이스에 저장해 놓고 그걸 불러서 지도에 표시했다. ㅎㅎㅎ
암튼 이번에 이 문제를 해결하려고 하루는 헤맨 것 같다. 예제만 있었어도 쉽게 해결할 일을...
2019.12.
많은 시간이 흘렀다. 점점 주소를 이용해서 좌표 구하기가 귀찮아 졌다. 그래서 주소를 이용해서 좌표를 구하고, 그걸 다중 마커와 다중 인포윈도우로 표시하는 것을 찾아 봤다. 아래 글에 정리하였다.
2019/12/29 - [ETC] - 주소를 이용하여 다중 마커와 다중 인포윈도우 표시하기(Kakao 지도 API)
'ETC' 카테고리의 다른 글
| 윈도우에 Apache, PHP, PostgreSQL의 설치 2 (0) | 2015.11.27 |
|---|---|
| 윈도우에 Apache, PHP, PostgreSQL의 설치 1 (0) | 2015.11.24 |
| ASUS K73E-TY418D 구입 (0) | 2012.10.06 |
| Installing and using the IMSL* Libraries (0) | 2009.11.25 |
| creat project, compile, debugging (0) | 2009.07.28 |