KakaoMap - db 등록된 위도,경도를 통해 여러개 마커 표시하기

등록된 위도,경도를 통해 여러개 마커 표시하기

https://apis.map.kakao.com/web/guide/#loadlibrary

XeFrontend::js("//dapi.kakao.com/v2/maps/sdk.js?libraries=services&appkey=" . $map_key ."&libraries=services,drawing,clusterer")->appendTo('head')->load();

{{--<script>--}}
{{--    var positions = []; //[]안에 length 0개 에서 push 이후에 length 9개 값들이 들어간다.--}}
{{--</script>--}}

{{-- <script>
     // 마커를 표시할 위치와 title 객체 배열입니다
        positions.push({
        {!! sprintf('title: "%s", latlng: new kakao.maps.LatLng(%s, %s)', $item->map_doro, $item->map_lat, $item->map_lng ) !!}
        });
    </script>--}}

{{--<script>--}}
{{--    // 마커를 표시할 위치와 title 객체 배열입니다--}}
{{--    positions.push({--}}
{{--        title: '{{$item->map_doro}}',--}}
{{--        latlng: new kakao.maps.LatLng({{$item->map_lat}}, {{$item->map_lng}})--}}
{{--    });--}}
{{--</script>--}}

//등록된 모든 매물에 대해서 여러개 마커 표시하기
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
  mapOption = {
    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
    level: 7 // 지도의 확대 레벨
  };

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



// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

// console.log(positions);

for (var i = 0; i < positions.length; i ++) {

  // 마커를 생성합니다
  var marker = new kakao.maps.Marker({
    map: map, // 마커를 표시할 지도
    position: positions[i].latlng, // 마커를 표시할 위치
    image : markerImage // 마커 이미지
  });

  //마커를 지도에 표시한다.
  marker.setMap(map);

  //커스텀 오버레이를 생성합니다.
  var customOverlay = new daum.maps.CustomOverlay(
    {
      position: positions[i].latlng
    }
  );

  //커스텀 오버레이를 지도에 표시한다.
  customOverlay.setMap(map);
  map.setCenter(positions[i].latlng);
}