다음지도 api : 여러개의 주소를 읽어와서 검색하고 마커 찍기 > 소스코드

• 목록

<style>
    .loc_title {width:200px;text-align:center;padding:10px 20px;font-size:20px;font-weight:bold;}
</style>
    <div class="box">

        <div id="map" style="width:100%;height:700px;"></div>
        <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=api키값&libraries=services"></script>
        <script>
            var mapContainer = document.getElementById('map'), // 지도를 표시할 div
                mapOption = {
                    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
                    level: 5 // 지도의 확대 레벨
                };

            // 지도를 생성합니다
            var map = new kakao.maps.Map(mapContainer, mapOption);

            // 주소-좌표 변환 객체를 생성합니다
            var geocoder = new kakao.maps.services.Geocoder();

            <?php foreach ($site_info as $key => $value) { ?>
                // 마커에 표시할 인포윈도우를 생성합니다
                var infowindow_<?=$value["si_id"];?> = new kakao.maps.InfoWindow({
                    content:"<div class=loc_title onclick=\"func_close(infowindow_<?=$value["si_id"];?>);\"><?=$value["si_name"];?></div>" // 인포윈도우에 표시할 내용
                });

                geocoder.addressSearch("<?=$value["si_addr"];?>", function(result, status) {
                    if (status === kakao.maps.services.Status.OK) {             // 정상적으로 검색이 완료됐으면
                        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
                        //x = result[0].x;
                        //y = result[0].y;


                        // 마커를 생성합니다
                        var marker_<?=$value["si_id"];?> = new kakao.maps.Marker({
                            map: map, // 마커를 표시할 지도
                            position: coords, // 마커의 위치
                            title:"<?=$value["si_name"];?>"
                        });

                        // 마커에 클릭이벤트를 등록합니다
                        kakao.maps.event.addListener(marker_<?=$value["si_id"];?>, 'click', function() {
                            //infowindow_<?=$value["si_id"];?>.open(map, marker);           // 마커 위에 인포윈도우를 표시합니다
                            infowindow_<?=$value["si_id"];?>.open(map, marker_<?=$value["si_id"];?>);
                        });

                        <?php if ($value["si_id"] == "gilyeong") { ?>
                        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
                        map.setCenter(coords);
                        <?php } ?>
                    }
                });


            <?php } ?>

            function func_close ( iw ) {
                iw.close();
            }
        </script>

    </div>