[PHP/JavaScript] MySQL 데이터로 카카오 지도 API에 다중 마커 표시하기

웹 페이지에 지도 구현
카카오 api
카카오 지도 api
다중마커 구현
데이터베이스 연동 다중마커 구현
카카오 지도 api php sql 연동
지도 api sql 연동
php에서 자바스크립트 변수 사용
자바스크립트에서 php 변수 사용 — 완성본

이거 하느라 3일동안 머리 부여잡고 있었다.

이 글 읽는 분들은 부디 저처럼 허송세월하지 마시라고 글씁디다...

사실 난 별로 한거 없고 이 분 코드를 참고했다.

그저...빛✨

다음 지도 API를 이용하여 다중 마커(multi marker)와 다중 인포윈도우(infowindow) 표시하기

[참고 : 다음 지도 API가 카카오 지도 API로 바뀌었다. 그래서 아래와 거의 비슷한 내용을 카카오 지도 API를 이용해서 다시 작성하였다. "주소를 이용하여 다중 마커와 다중 인포윈도우 표시하기(Ka

bhpark.tistory.com

내가 하려는 거

내 경우 서울시의 아파트 위치를 지도에 전부 표현하는 것이 목적이었다.

그렇게 하기 위해서 데이터베이스에 아파트 이름, 위도정보, 경도정보가 저장되어 있었다.

그 데이터를 불러와서 카카오 API를 이용해 웹페이지 내 지도에 올리는 것이 목표!

구현 과정

1. 데이터베이스의 정보를 PHP를 통해 연동하고, PHP 변수로 저장

2. PHP 변수를 자바스크립트로 보냄

3. 카카오 지도 API에 사용. 끗!

소스코드

소스코드는 하나의 html 파일로 구현하였다.

vs코드를 사용했는데 php가 흰색으로 안먹히는 상황이라면 추가적으로 vs code의 setting.json에서 설정을 해야 한다.

//데이터베이스 불러오기
<?php
   $con=mysqli_connect("localhost", "유저", "패스워드", "DB이름") or die("MySQL 접속 실패");

   $sql = "SELECT * FROM DB이름";
 
   $ret = mysqli_query($con, $sql);
 
   $arr = array();
 
   while($row = mysqli_fetch_array($ret)){
       array_push($arr, [(double)$row['y'], (double)$row['x'] ,$row['aptname']]);    
} //배열 arr에 [36.~, 126.~, 아파트이름] 형태로 저장하였다.

//echo var_dump($arr); //배열에 잘 들어갔는지 확인하기위함

mysqli_close($con);

?>

<!DOCTYPE html>
<html>
    <head>
        <title>다중 마커와 다중 인포윈도우</title>
        <meta name="viewport" content="initial-scale=1.0,user-scalable=no"> 
        
        <style type="text/css">
        html { height: 100% } 
        body { height: 100%; margin: 0; padding: 0 }
        h1 { text-align : center}
        #map { width: 90%; height: 80%; border : solid blue ; margin-left:auto; margin-right:auto } 
        </style> 

</head>

        <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=카카오api에서 발급받은 javascript 키"></script>
        <script type="text/javascript"> 
        window.onload = function() { 
            var position = new kakao.maps.LatLng(37.5737049, 126.9888481); // 지도의 중심     
            var map = new kakao.maps.Map(document.getElementById('map'), { 
                center: position,
                level: 9,
                mapTypeId: kakao.maps.MapTypeId.ROADMAP });
            var zoomControl = new kakao.maps.ZoomControl();
            map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
            var mapTypeControl = new kakao.maps.MapTypeControl();
            map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT); // 다중 마커와 인포윈도우 표시
            
            var locations = <?php echo json_encode($arr); ?>;
            for(i = 0; i < locations.length; i++) {
                var marker = new kakao.maps.Marker({ 
                    position: new kakao.maps.LatLng(locations[i][0], locations[i][1])
                 });
                marker.setMap(map);
                kakao.maps.event.addListener(marker, 'click', (function(marker, i) { 
                    return function() { 
                        var infowindow = new kakao.maps.InfoWindow({
                            content: '<p style="margin:7px 22px 7px 12px;font:12px/1.5 sans-serif">' + locations[i][2] + '</p>',
                            removable : true
                            });
                            infowindow.open(map, marker);
                             } 
                             })(marker, i));
                            } }; 
                            </script>
                            
                            <body>
    <div id="map"></div>
</body></html>

실행결과

굿굿👍

이제 해당 다중마커들을 클러스터링을 해서 구별로 표현하고 싶은뎅...

일요일까지 하고싶다...🙄

'JavaScript' 카테고리의 다른 글

노드 JS란? (0)	2023.01.08

Too scarce, still filling it up

[PHP/JavaScript] MySQL 데이터로 카카오 지도 API에 다중 마커 표시하기