다음 지도 API 를 활용해서 지도를 만드는 비교적 간단한 샘플입니다. 아래 소개된 소스 코드를 실행하면 100개의 마커가 뿌려지고 해당 마커를 클릭하면 이미지를 보여주는 다음과 같은 실행 화면을 확인할 수 있습니다. 자신의 홈페이지에서 테스트 하기 위해서는 다음 지도 API 키를 해당 홈페이지 (https://apis.daum.net/register/mapsapi.daum) 에서 얻을 수 있으며 키 값($daum_map_api_key)을 얻은 API 키로 교체해야 합니다. 참고로 구글 지도 API에도 관심이 있는 분은 앞서 소개한 "자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup)" 포스트도 참고하세요.
display_marker({user:0,lat:current_lat,lon:current_lon});
for (record in person_list) {
display_marker(person_list[record]);
}
setTimeout(display_loaded, 1000);
});
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
function display_marker(record){
var icon = new DIcon("http://localimg.daum-img.net/localimages/07/2008/map/i_mks_b1.gif", new DSize(13, 16));
var point = new DLatLng(Number(record.lat),Number(record.lon));
var marker = create_marker(point, record.user);
map.addOverlay(marker, {mark:icon});
//map.addOverlay(marker);
}
function create_marker(point, person) {
var html = '<a href="http://hompy.info/582"><img src="/hompydesign.com?seq='+person+'" class="window_image"></a>';
var marker= new DMark(point, { infowindow : new DInfoWindow(html), draggable : false });
//marker.addAutoExpand("pos:"+person);
return marker;
}
추천 : 
