초보 카카오 지도관련 질문 드립니다.
본문
안녕하세요~
메인 화면에 게시판(product01)에 (wr_1) 주소를 불러와서 카카오 지도에 표시할려고 하는데요
고수님들 아래 소스 좀 보아 주세요! 지도가 뜨질 안아요 ㅠ
수정할 곳이나 잘못된 곳 있으면 조언좀 부탁 드립니다."꾸벅"
(아래)
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey="></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(36.48005808069782, 127.28903907443583), // 지도의 중심좌표
level: 13 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
var positions = [
<?
$sql = "select * from g5_write_product01 order by wr_num";
$result = sql_query($sql);
while($row = sql_fetch_array($result)) {
$address = $row['wr_1'];
$url = "https://dapi.kakao.com/v2/local/search/address.json?query=".urlencode($address);
$ch=curl_init();
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url); // url 연결
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_HTTPHEADER,
array("Accept: application/json", "Content-Type: application/json",
"Authorization: KakaoAK {혹시 요기는 머가 들어가나요}"));
curl_setopt($ch, CURLOPT_VERBOSE, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$response = curl_exec($ch);
$result = (array) json_decode($response);
curl_close($ch); // 종료
}
?>
];
for (var i = 0; i < positions.length; i ++) {
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: positions[i].content // 인포윈도우에 표시할 내용
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker,infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
</script>
</div>
</div>
</div>
<script>
$(document).ready(function(){
});
</script>
답변 2
https://apis.map.kakao.com/web/sample/addr2coord/
여기를 참조해서..
여러개의 마커를 표시하려면,
"제주특별자치도 제주시 첨단로 242" 이 부분의 주소를 변경해줘야 합니다.