주소로 지도 표시
http://apis.map.kakao.com/web/sample/addr2coord/
여러개 마커 표시
http://apis.map.kakao.com/web/sample/multipleMarkerImage/
이거 2개를 섞어야 하는데…
주소를 이용해서 여러개 마커를 표시하려고 하는데 어떻게 하면 되나요?
#해결
아래 코드로 해결했습니다. ㅠㅠ
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=4459262e17504e5750223916650a1918&libraries=services"></script>
<script cond="!$document_srl">
var listData = [
<!--@foreach($document_list as $no => $document)-->
["{$document->getExtraEidValue('address')[1]}","{$document->getExtraEidValue('fish')}"],
<!--@end-->
];
// 맵을 넣을 div
var mapContainer = document.getElementById('map');
var mapOption = {
center: new daum.maps.LatLng(35.95, 128.25),
level: 2
};
// 맵 표시
var map = new daum.maps.Map(mapContainer, mapOption);
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
// 주소 -> 좌표 변환 라이브러리
var geocoder = new daum.maps.services.Geocoder();
// foreach loop
listData.forEach(function(addr, index) {
geocoder.addressSearch(addr[0], function(result, status) {
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
var marker = new daum.maps.Marker({
position: coords,
clickable: true
});
// 마커를 지도에 표시합니다.
marker.setMap(map);
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>',
removable : true
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
}
});
});
<!--@foreach($document_list as $no => $document)-->
// {$document->getExtraEidValue('address')[1]};
console.log("{$document->getExtraEidValue('fish')}")
console.log("{$document->getExtraEidValue('address')[1]}")
<!--@end-->
// {$document->getExtraEidValue('address')[1]};
//{$document->getExtraEidValue('fish')}
</script>