네이버 지도 api v3 적용

정보 창 표시하기

https://navermaps.github.io/maps.js/docs/tutorial-1-infowindow-simple.example.html

정보 창 표시하기

정보창을 표시하는 기본 예제입니다.

var HOME_PATH = window.HOME_PATH || '.';

var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147),
    map = new naver.maps.Map('map', {
        center: cityhall.destinationPoint(0, 500),
        zoom: 10
    }),
    marker = new naver.maps.Marker({
        map: map,
        position: cityhall
    });

var contentString = [
        '<div class="iw_inner">',
        '   <h3>서울특별시청</h3>',
        '   <p>서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청<br />',
        '       <img src="'+ HOME_PATH +'/img/example/hi-seoul.jpg" width="55" height="55" alt="서울시청" class="thumb" /><br />',
        '       02-120 | 공공,사회기관 &gt; 특별,광역시청<br />',
        '       <a href="http://www.seoul.go.kr" target="_blank">www.seoul.go.kr/</a>',
        '   </p>',
        '</div>'
    ].join('');

var infowindow = new naver.maps.InfoWindow({
    content: contentString
});

naver.maps.Event.addListener(marker, "click", function(e) {
    if (infowindow.getMap()) {
        infowindow.close();
    } else {
        infowindow.open(map, marker);
    }
});

infowindow.open(map, marker);

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=${naverMapApiKey}"></script>

<div id="careerMap" style="width:100%;height:180px;"></div>

var position = new naver.maps.LatLng($("#lat").val(),$("#lon").val());

var map = new naver.maps.Map('careerMap',{

  center: position,

  zoom: 12

});

if($("#lat").val() != '37.56661' && $("#lon").val() != '126.978388'){

var markerOptions = {

position : position,

map : map ,

icon : {

  url: 'http://static.naver.net/maps/v3/pin_default.png',

      size: new naver.maps.Size(22, 35),

      origin: new naver.maps.Point(0, 0),

      anchor: new naver.maps.Point(11, 35)

}

};

var marker = new naver.maps.Marker(markerOptions);

var infowindow = new naver.maps.InfoWindow({ content: $("#Name").val() });

naver.maps.Event.addListener(marker, "click", function(e) {

    if (infowindow.getMap()) {

        infowindow.close();

    } else {

        infowindow.open(map, marker);

    }

});

infowindow.open(map, marker);

}

다수의 마커에 이벤트 핸들러 사용하기

https://navermaps.github.io/maps.js/docs/tutorial-marker-viewportevents.example.html

var HOME_PATH = window.HOME_PATH || '.';

var MARKER_SPRITE_X_OFFSET = 29,
    MARKER_SPRITE_Y_OFFSET = 50,
    MARKER_SPRITE_POSITION = {
        "A0": [0, 0],
        "B0": [MARKER_SPRITE_X_OFFSET, 0],
        "C0": [MARKER_SPRITE_X_OFFSET*2, 0],
        "D0": [MARKER_SPRITE_X_OFFSET*3, 0],
        "E0": [MARKER_SPRITE_X_OFFSET*4, 0],
        "F0": [MARKER_SPRITE_X_OFFSET*5, 0],
        "G0": [MARKER_SPRITE_X_OFFSET*6, 0],
        "H0": [MARKER_SPRITE_X_OFFSET*7, 0],
        "I0": [MARKER_SPRITE_X_OFFSET*8, 0],

        "A1": [0, MARKER_SPRITE_Y_OFFSET],
        "B1": [MARKER_SPRITE_X_OFFSET, MARKER_SPRITE_Y_OFFSET],
        "C1": [MARKER_SPRITE_X_OFFSET*2, MARKER_SPRITE_Y_OFFSET],
        "D1": [MARKER_SPRITE_X_OFFSET*3, MARKER_SPRITE_Y_OFFSET],
        "E1": [MARKER_SPRITE_X_OFFSET*4, MARKER_SPRITE_Y_OFFSET],
        "F1": [MARKER_SPRITE_X_OFFSET*5, MARKER_SPRITE_Y_OFFSET],
        "G1": [MARKER_SPRITE_X_OFFSET*6, MARKER_SPRITE_Y_OFFSET],
        "H1": [MARKER_SPRITE_X_OFFSET*7, MARKER_SPRITE_Y_OFFSET],
        "I1": [MARKER_SPRITE_X_OFFSET*8, MARKER_SPRITE_Y_OFFSET],

        "A2": [0, MARKER_SPRITE_Y_OFFSET*2],
        "B2": [MARKER_SPRITE_X_OFFSET, MARKER_SPRITE_Y_OFFSET*2],
        "C2": [MARKER_SPRITE_X_OFFSET*2, MARKER_SPRITE_Y_OFFSET*2],
        "D2": [MARKER_SPRITE_X_OFFSET*3, MARKER_SPRITE_Y_OFFSET*2],
        "E2": [MARKER_SPRITE_X_OFFSET*4, MARKER_SPRITE_Y_OFFSET*2],
        "F2": [MARKER_SPRITE_X_OFFSET*5, MARKER_SPRITE_Y_OFFSET*2],
        "G2": [MARKER_SPRITE_X_OFFSET*6, MARKER_SPRITE_Y_OFFSET*2],
        "H2": [MARKER_SPRITE_X_OFFSET*7, MARKER_SPRITE_Y_OFFSET*2],
        "I2": [MARKER_SPRITE_X_OFFSET*8, MARKER_SPRITE_Y_OFFSET*2]
    };

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
});

var bounds = map.getBounds(),
    southWest = bounds.getSW(),
    northEast = bounds.getNE(),
    lngSpan = northEast.lng() - southWest.lng(),
    latSpan = northEast.lat() - southWest.lat();

var markers = [],
    infoWindows = [];

for (var key in MARKER_SPRITE_POSITION) {

    var position = new naver.maps.LatLng(
        southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());

    var marker = new naver.maps.Marker({
        map: map,
        position: position,
        title: key,
        icon: {
            url: HOME_PATH +'/img/example/sp_pins_spot_v3.png',
            size: new naver.maps.Size(24, 37),
            anchor: new naver.maps.Point(12, 37),
            origin: new naver.maps.Point(MARKER_SPRITE_POSITION[key][0], MARKER_SPRITE_POSITION[key][1])
        },
        zIndex: 100
    });

    var infoWindow = new naver.maps.InfoWindow({
        content: '<div style="width:150px;text-align:center;padding:10px;">The Letter is <b>"'+ key.substr(0, 1) +'"</b>.</div>'
    });

    markers.push(marker);
    infoWindows.push(infoWindow);
};

naver.maps.Event.addListener(map, 'idle', function() {
    updateMarkers(map, markers);
});

function updateMarkers(map, markers) {

    var mapBounds = map.getBounds();
    var marker, position;

    for (var i = 0; i < markers.length; i++) {

        marker = markers[i]
        position = marker.getPosition();

        if (mapBounds.hasLatLng(position)) {
            showMarker(map, marker);
        } else {
            hideMarker(map, marker);
        }
    }
}

function showMarker(map, marker) {

    if (marker.setMap()) return;
    marker.setMap(map);
}

function hideMarker(map, marker) {

    if (!marker.setMap()) return;
    marker.setMap(null);
}

// 해당 마커의 인덱스를 seq라는 클로저 변수로 저장하는 이벤트 핸들러를 반환합니다.
function getClickHandler(seq) {
    return function(e) {
        var marker = markers[seq],
            infoWindow = infoWindows[seq];

        if (infoWindow.getMap()) {
            infoWindow.close();
        } else {
            infoWindow.open(map, marker);
        }
    }
}

for (var i=0, ii=markers.length; i<ii; i++) {
    naver.maps.Event.addListener(markers[i], 'click', getClickHandler(i));
}

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=${naverMapApiKey}"></script>

<div id ="map" style="width:100%;height:250px;frameborder:0px;border:0px"></div>

<script type="text/javascript">

var m = new Array();

var t = new Array();

<c:set var="i" value="0" />

<c:choose>

<c:when test="${!empty result}">

<c:forEach items="${result}" var="result">

m[${i}] = new naver.maps.LatLng(${result.lat},${result.lon});

t[${i}] = '${result.name}';

<c:set var="i" value="${i+1}" />

</c:forEach>

</c:when>

<c:otherwise>

m[0] = new naver.maps.LatLng(37.56661, 126.978388);

t[0] = '검색결과가 없습니다.'

</c:otherwise>

</c:choose>

//var defaultLevel = 7;

//var map = new naver.maps.Map('map',{

var map = new naver.maps.Map(document.getElementById('map'), {

//  center : new naver.maps.LatLng(37.566285,126.977960),

center : new naver.maps.LatLng(m[0]), 

zoom : 6,

   size : new naver.maps.Size(890, 250)

});

    var markers = [],infoWindows = [];

for (var ii=0; ii<m.length; ii++) {

    var icon = {

            url: 'http://static.naver.net/maps/v3/pin_default.png',

            size: new naver.maps.Size(24, 37),

            anchor: new naver.maps.Point(12, 37),

            origin: new naver.maps.Point(ii * 29, 0)

        },

        marker = new naver.maps.Marker({

            position: m[ii],

            map: map,

            icon: icon,

            shadow: {

                url: 'http://static.naver.net/maps/v3/pin_default.png',

                size: new naver.maps.Size(40, 35),

                origin: new naver.maps.Point(0, 0),

                anchor: new naver.maps.Point(11, 35)

            }

        });

    var infoWindow = new naver.maps.InfoWindow({ content:t[ii] });

    

    markers.push(marker);

    infoWindows.push(infoWindow);

}

// 해당 마커의 인덱스를 seq라는 클로저 변수로 저장하는 이벤트 핸들러를 반환합니다.

function getClickHandler(seq) {

    return function(e) {

          var marker = markers[seq];

          var infoWindow = infoWindows[seq];

        if (infoWindow.getMap()) {

            infoWindow.close();

        } else {

            infoWindow.open(map, marker);

        }

    }

}

for (var i=0; i<markers.length; i++) {

    naver.maps.Event.addListener(markers[i],  'click', getClickHandler(i));

}

</script>