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,591
12년 전 조회 1,216
12년 전 조회 2,831
12년 전 조회 2,284
12년 전 조회 502
12년 전 조회 2,964
12년 전 조회 1,412
12년 전 조회 1,320
12년 전 조회 1,377
12년 전 조회 3,297
12년 전 조회 2,067
12년 전 조회 3,725
12년 전 조회 8,605
12년 전 조회 4,208
12년 전 조회 3,775
12년 전 조회 1,390
12년 전 조회 1,459
12년 전 조회 3,177
12년 전 조회 4,013
12년 전 조회 4,414
12년 전 조회 1,637
12년 전 조회 1,319
12년 전 조회 906
12년 전 조회 1,008
12년 전 조회 2,749
12년 전 조회 2,760
12년 전 조회 1,279
12년 전 조회 2,824
12년 전 조회 1,305
12년 전 조회 8,483
12년 전 조회 1,535
12년 전 조회 3,798
12년 전 조회 6,410
12년 전 조회 1,593
12년 전 조회 2,861
12년 전 조회 612
12년 전 조회 1,322
12년 전 조회 1,182
12년 전 조회 1,341
12년 전 조회 3,341
12년 전 조회 1,114
12년 전 조회 1,845
12년 전 조회 1,282
12년 전 조회 928
12년 전 조회 1,420
12년 전 조회 2,127
12년 전 조회 1,412
12년 전 조회 1,292
12년 전 조회 1,817
12년 전 조회 1.5만
12년 전 조회 1,091
12년 전 조회 894
12년 전 조회 2,739
12년 전 조회 8,985
12년 전 조회 1,304
12년 전 조회 1,196
12년 전 조회 1,658
12년 전 조회 1,160
12년 전 조회 1,298
12년 전 조회 3,579
12년 전 조회 1,484
12년 전 조회 2,152
12년 전 조회 1,177
12년 전 조회 1,339
12년 전 조회 3,057
12년 전 조회 901
12년 전 조회 1,370
12년 전 조회 1,638
12년 전 조회 2,061
12년 전 조회 2,159
12년 전 조회 2,590
12년 전 조회 1,079
12년 전 조회 1,105
12년 전 조회 4,468
12년 전 조회 1,521
12년 전 조회 1,663
12년 전 조회 5,525
12년 전 조회 3,287
12년 전 조회 2,166
12년 전 조회 1,322
12년 전 조회 3,511
12년 전 조회 2,546
12년 전 조회 2,252
12년 전 조회 1,869
12년 전 조회 1,563
12년 전 조회 1,557
12년 전 조회 1,311
12년 전 조회 2,428
12년 전 조회 1,702
12년 전 조회 1,378
12년 전 조회 2,463
12년 전 조회 1,640
12년 전 조회 2,250
12년 전 조회 3,472
12년 전 조회 1,262
12년 전 조회 2,229
12년 전 조회 1,063
12년 전 조회 1,554
12년 전 조회 2,143
12년 전 조회 1,781
🐛 버그신고