k

네이버 지도 API 다중마커 구현 소스 입니다.

드디어 정리를 했네용...
대충 읽어보시면 이해가 갈것이라 생각합니다^^

테스트 사이트
http://www.moga.co.kr/motel/motel_map.html

참고사항
1. 지도창의 너비는 100%가 가능하지만 높이는 100%를 넣으면 에러가 남 px단위로 px를 제외하고 입력
2. 마커=>설명창 변수ID 전달 방법으로 title를 이용하기 때문에 title를 다른 방법으로 이용 할 수가 없습니다.
3. 설명창에서 보여질 변수가 많을경우 oMarkerParam 변수를 변경, 늘리셔서 사용하시면 됩니다.
    * 3번항목은 테스트 사이트를 참고 하시기 바랍니다.^^

4. 꼭 앞에 jquery 해주세요.~

<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=네이버API키값"></script>
<script type="text/javascript">
<!--
var oMarkerParam = new Array();
$(document).ready(function(){
 var oCenterPoint = new nhn.api.map.LatLng(지도의 중심x좌표, 지도의 중심y좌표);
 nhn.api.map.setDefaultPoint('LatLng');
 oMap = new nhn.api.map.Map('naver_map', {
    point : oCenterPoint,
    zoom : 10, // - 초기 줌 레벨은 10으로 둔다.
    enableWheelZoom : false,
    enableDragPan : true,
    enableDblClickZoom : false,
    mapMode : 0,
    activateTrafficMap : false,
    activateBicycleMap : false,
    minMaxLevel : [ 1, 14 ],
    size : new nhn.api.map.Size(지도창 너비, 지도창 높이)
 });

 var markerCount = 0;
 // 컨트롤 설정
 var mapZoom = new nhn.api.map.ZoomControl();
 mapZoom.setPosition({left:10, top:10}); // - 줌 컨트롤 위치 지정.
 oMap.addControl(mapZoom);
 //마커 이미지, 사이즈 설정
 var oSize = new nhn.api.map.Size(31, 38); //마커사이즈대로 설정
 var oOffset = new nhn.api.map.Size(31, 38);
 var oIconOn = new nhn.api.map.Icon('마커아이콘 이미지', oSize, oOffset);
 // 마커의 기본 표시 설정
 var infoWindow = new nhn.api.map.InfoWindow(); // - info window 생성
 var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
 oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
 oMap.addOverlay(infoWindow); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
 
 //마커 추가
 <?
 //마커 쿼리 반복문 위치

 $i = 0;

 while($list = mysql_fetch_array($result)){
 ?>
 var oPoint = new nhn.api.map.LatLng(x좌표,y좌표);
 var oMarker = new nhn.api.map.Marker(oIconOn, {
  title : '<?=$i?>',
  zIndex : 1
 });

 //변수전달 방법, 배열사용

 oMarkerParam[<?=$i?>] = '';

 oMarker.setPoint(oPoint);
 oMap.addOverlay(oMarker);
 //첫 마커의 설명창만 보이게 설정

<? if($i==0){ ?>
 oMap.setCenter(oMarker.getPoint());
 infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[<?=$i?>]);
 infoWindow.setPoint(oMarker.getPoint());
 infoWindow.setVisible(true);
 infoWindow.setPosition({right : 5, top : 20});
 infoWindow.autoPosition();
 <? } ?>
 <?

  $i++;

 }

 ?>

 oMap.attach('click', function(oCustomEvent) {
  var oTarget = oCustomEvent.target;
  var oMarkerId = oCustomEvent.target.getTitle();
  // 마커 클릭하면
  if (oTarget instanceof nhn.api.map.Marker) {
   
   //oTarget.setIcon(oIconOn);
   oMap.setCenter(oMarker.getPoint());
   infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[oMarkerId]);
   infoWindow.setPoint(oMarker.getPoint());
   infoWindow.setVisible(true);
   infoWindow.setPosition({right : 5, top : 20});
   infoWindow.autoPosition();
   return;
  }
 });
});


//-->
</script>

<div id="naver_map"></div>

|

댓글 9개

앗 죄송합니다.
소스가 몇군데 틀렸네요. 제가 실제 적용한 것은 마커의 종류가 2가지로 나누어 있어서
그 부분을 제외하고 정리해서 올린다는게 오타를 냈네용 ㅠㅠ 죄송합니다.

지금 쪽지로 보내드렸습니다.^^ 오타부분은
1. var oMarker = new nhn.api.map.Marker(oIconNo, {
=> var oMarker = new nhn.api.map.Marker(oIconOn, {

2. }
return;
}

=> return;
}

이 두가지를 수정하시면 됩니다 위의 소스는 다시 수정해놓았습니다.
수정된 소스는 쪽지로 보내드렸습니다.^^
님 친절한 답변에 감사드립니다. 그런데 쪽지로 받은 소스자료에서 키값,아이콘 이미지주소값 변경후 실행하니 마찬가지로 흰 백지만 나타나네요. 혹시나 해서 query 데이타 echo 로 보면 제대로 위도,경보, 잘 나타나는데ㅠㅠㅠㅠ.. 꼭 되게 하고싶은데...
님 좀 힘드시더라도 제가 최종 소스를 한번 더올릴테니 뭐가 잘못 됐는지 함만 더 봐주세요.. 부탁합니다.

<?
// 테이블이름을 파라미터로 받는다.
$pro_table = ( isset($HTTP_GET_VARS['table']) ? $HTTP_GET_VARS['table'] : 'map_busan' );
$pro_guru = ( isset($HTTP_GET_VARS['guru']) ? $HTTP_GET_VARS['guru'] : '2' );

// 필요한 함수가 정의된 config.php를 include시킨다.
include "config.php";

// Mysql Server에 접속한다. euckr 이 카페 홈페이지에서 한글깨지는걸 방지
$conn = mysql_connect( $set_host, $set_user, $set_password );
mysql_query("SET NAMES euckr");
mysql_select_db( $set_dbname );

switch($pro_guru){
case "1" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 6;
$condition = "where nsc='울산'";
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and nsc='울산'";
break;

case "2" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 6;
$condition = "where gubun = '모국' and nsc='울산'";
break;

case "3" :
$wdo = 35.556019;
$kdo = 129.3489941;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk = '울산'";
break;

case "4" :
$wdo = 35.556019;
$kdo = 129.3489941;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%울산성남%'";
break;

case "5" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%서울산%'";
break;

case "6" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%남울산%'";
break;

case "7" :
$wdo = 35.5075727;
$kdo = 129.3288307;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%동울산%'";
break;

case "8" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%양정%'";
break;
case "9" :
$wdo = 35.6052646;
$kdo = 129.1773898;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%언양%'";
break;

case "10" :
$wdo = 35.4247293;
$kdo = 129.3128576;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%온산%'";
break;
}
// 모국검색
$pro_id = ( isset($HTTP_GET_VARS['id']) ? $HTTP_GET_VARS['id'] : 0 );

// Search한 내용이 있는지 체크하여 쿼리에 반영한다.
$query = "select * from $pro_table $condition" ;
$result = mysql_query ( $query );


?>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=6232785d73f29469df8dbbdb10b6799a"></script>
<script type="text/javascript">
var oMarkerParam = new Array();
$(document).ready(function(){
var oCenterPoint = new nhn.api.map.LatLng(<?=$wdo?>,<?=$kdo?>);
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('naver_map', {
point : oCenterPoint,
zoom : 10, // - 초기 줌 레벨은 10으로 둔다.
enableWheelZoom : false,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(700, 350)
});

var markerCount = 0;
// 컨트롤 설정
var mapZoom = new nhn.api.map.ZoomControl();
mapZoom.setPosition({left:10, top:10}); // - 줌 컨트롤 위치 지정.
oMap.addControl(mapZoom);
//마커 이미지, 사이즈 설정
var oSize = new nhn.api.map.Size(31, 38); //마커사이즈대로 설정
var oOffset = new nhn.api.map.Size(31, 38);
var oIconOn = new nhn.api.map.Icon('../00image/aa1.png', oSize, oOffset);
// 마커의 기본 표시 설정
var infoWindow = new nhn.api.map.InfoWindow(); // - info window 생성
var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
oMap.addOverlay(infoWindow); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.

//마커 추가
<?
//마커 쿼리 반복문 위치
$m = 0;
while($list = mysql_fetch_array($result)){

?>
var oPoint = new nhn.api.map.LatLng(<?=$list[we]?>,<?=$list[kng]?>);
var oMarker = new nhn.api.map.Marker(oIconOn, {
title : '<?=$m?>',
zIndex : 1
});
//변수전달 방법, 배열사용
oMarkerParam[<?=$m?>] = '변수값'+<?=$m?>;
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
//첫 마커의 설명창만 보이게 설정
<? if($m==0){ ?>
oMap.setCenter(oMarker.getPoint());
infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[<?=$m?>]);
infoWindow.setPoint(oMarker.getPoint());
infoWindow.setVisible(true);
infoWindow.setPosition({right : 5, top : 20});
infoWindow.autoPosition();
<? } ?>
<?
$m++;
}
?>

oMap.attach('click', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
var oMarkerId = oCustomEvent.target.getTitle();
// 마커 클릭하면
if (oTarget instanceof nhn.api.map.Marker) {
//oTarget.setIcon(oIconOn);
oMap.setCenter(oMarker.getPoint());
infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[oMarkerId]);
infoWindow.setPoint(oTarget.getPoint());
infoWindow.setVisible(true);
infoWindow.setPosition({right : 5, top : 20});
infoWindow.autoPosition();
return;
}
});
});
</script>
<div id="naver_map"></div>
님 안녕하세요.... 4. 꼭 앞에 jquery 해주세요.~ 라는게 어떤 건지요...
제pc에서 기존에 마커 출력 되는 소스와 윗부분이 좀 다르네요..
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
이것을 추가해달라는 말입니다.^^
혹시 쪽지 보셨나요?? 쪽지로 질문을 드렸는데 소식이 없어 글 올립니다.
마커가 없는 지도부분 클릭할때 오류가 있네요
(익스플로러 오류 표시 기능으로 보면 오류팝업)

--
웹 페이지 오류 세부 정보

메시지: 개체가 'getTitle' 속성이나 메서드를 지원하지 않습니다.
줄: 3
문자: 132021
코드: 0
URI: http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=63dd915c2f912c67b98ad379e971dce3
--
오픈소스는 없을까요^^?? 짱이세요~
아주 예전에 작업해놓은것인데 참고하세요~
http://kiplayer.phps.kr/bbs/board.php?bo_table=comm_deve&wr_id=22
댓글을 작성하시려면 로그인이 필요합니다. 로그인

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12년 전 조회 5,645
12년 전 조회 1,276
12년 전 조회 2,894
12년 전 조회 2,348
12년 전 조회 573
12년 전 조회 3,033
12년 전 조회 1,478
12년 전 조회 1,378
12년 전 조회 1,443
12년 전 조회 3,365
12년 전 조회 2,134
12년 전 조회 3,793
12년 전 조회 8,671
12년 전 조회 4,271
12년 전 조회 3,842
12년 전 조회 1,450
12년 전 조회 1,532
12년 전 조회 3,235
12년 전 조회 4,073
12년 전 조회 4,480
12년 전 조회 1,702
12년 전 조회 1,385
12년 전 조회 978
12년 전 조회 1,082
12년 전 조회 2,813
12년 전 조회 2,827
12년 전 조회 1,341
12년 전 조회 2,892
12년 전 조회 1,370
12년 전 조회 8,545
12년 전 조회 1,597
12년 전 조회 3,865
12년 전 조회 6,467
12년 전 조회 1,661
12년 전 조회 2,914
12년 전 조회 690
12년 전 조회 1,395
12년 전 조회 1,239
12년 전 조회 1,404
12년 전 조회 3,402
12년 전 조회 1,174
12년 전 조회 1,903
12년 전 조회 1,345
12년 전 조회 993
12년 전 조회 1,477
12년 전 조회 2,199
12년 전 조회 1,478
12년 전 조회 1,358
12년 전 조회 1,887
12년 전 조회 1.5만
12년 전 조회 1,151
12년 전 조회 969
12년 전 조회 2,803
12년 전 조회 9,049
12년 전 조회 1,362
12년 전 조회 1,261
12년 전 조회 1,721
12년 전 조회 1,234
12년 전 조회 1,374
12년 전 조회 3,642
12년 전 조회 1,547
12년 전 조회 2,221
12년 전 조회 1,239
12년 전 조회 1,390
12년 전 조회 3,116
12년 전 조회 969
12년 전 조회 1,431
12년 전 조회 1,696
12년 전 조회 2,117
12년 전 조회 2,217
12년 전 조회 2,650
12년 전 조회 1,141
12년 전 조회 1,168
12년 전 조회 4,547
12년 전 조회 1,575
12년 전 조회 1,723
12년 전 조회 5,597
12년 전 조회 3,343
12년 전 조회 2,229
12년 전 조회 1,386
12년 전 조회 3,577
12년 전 조회 2,601
12년 전 조회 2,307
12년 전 조회 1,925
12년 전 조회 1,627
12년 전 조회 1,615
12년 전 조회 1,371
12년 전 조회 2,486
12년 전 조회 1,760
12년 전 조회 1,440
12년 전 조회 2,517
12년 전 조회 1,707
12년 전 조회 2,314
12년 전 조회 3,538
12년 전 조회 1,320
12년 전 조회 2,286
12년 전 조회 1,130
12년 전 조회 1,617
12년 전 조회 2,202
12년 전 조회 1,842
🐛 버그신고