네이버 지도 API 다중마커 구현 소스 입니다. > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

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

JavaScript 네이버 지도 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>

추천
1
  • 복사

댓글 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에서 기존에 마커 출력 되는 소스와 윗부분이 좀 다르네요..
마커가 없는 지도부분 클릭할때 오류가 있네요
(익스플로러 오류 표시 기능으로 보면 오류팝업)

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

메시지: 개체가 'getTitle' 속성이나 메서드를 지원하지 않습니다.
줄: 3
문자: 132021
코드: 0
URI: http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=63dd915c2f912c67b98ad379e971dce3
--
© SIRSOFT
현재 페이지 제일 처음으로