[카카오 API] 여러개 마커 표시하기 - (1)

카카오 API를 이용하여 지도에 여러개의 마커를 표시하기 위해서는 php와 자바스크립트 언어를 사용해야한다.

 

php로 mysql의 테이블 내용을 불러온 뒤 자바스크립트 변수에 넣어주어야하는데,

바로하는 법을 몰라서 여러 시행착오를 겪고 있다.

 

(1) 자바스크립트만 사용

<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
        center: new daum.maps.LatLng(37.23620796972232,127.20643061901345), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

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

var positions = [
    {
        latlng: new daum.maps.LatLng(37.23620796972232,127.20643061901345)
    }
];
</script>

 

결과: 해당하는 위경도에 마크 하나가 잘 찍히는 것을 확인할 수 있다.

 

원하는 장소에 마크가 잘 찍힌 것을 확인할 수 있다

 

(2) php 테스트 - 위경도 출력

<?php
$con = mysqli_connect($db_host,$db_user,$db_passwd,$db_name);

mysqli_set_charset($con, "utf8");

$result = mysqli_query($con, "select * from Marker_DB");

$n = 1;
while($row = mysqli_fetch_array($result)){
  echo $row['lon'];
  echo ", ";
  echo $row['lat'];
  echo " / ";
$n++;
}
?>

결과: 위경도가 이쁘게 출력된다.

위경도 출력값 일부 캡쳐

(3) php 테스트 - 자바스크립트 속에 php 삽입

<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
        center: new daum.maps.LatLng(37.23620796972232,127.20643061901345), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

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

<?
$a = 37.23620796972232;
$b = 127.20643061901345;
?>

var positions = [
    {
        latlng: new daum.maps.LatLng(<?= $a; ?>, <?= $b; ?>)
    }
];
</script>

결과: (1)과 같이 마크 출력이 되는 것을 확인 할 수 있다.

(1)과 동일하게 마크 표시가 된다

(4) php 테스트 - while문을 php에 넣고 자바스크립트에 표시하기

<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
        center: new daum.maps.LatLng(37.23620796972232,127.20643061901345), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

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

<?php
$con = mysqli_connect($db_host,$db_user,$db_passwd,$db_name);

mysqli_set_charset($con, "utf8");

$result = mysqli_query($con, "select * from Marker_DB");

$n = 1;
while($row = mysqli_fetch_array($result)){
  $a = $row['lat'];
  $b = $row['lon'];
$n++;
}
?>
var positions = [
    {
        latlng: new daum.maps.LatLng(<?= $a; ?>, <?= $b; ?>)
    }
];
</script>

결과: 하나의 마크만 표시되는 것을 확인할 수 있었다. 확인 결과 그 하나의 좌표는 테이블 내용 중 가장 마지막(511번째) 좌표였다.

511개가 아닌 하나의 좌표만 표시되는 것을 확인할 수 있다