Kakao 지도 api 활용) 여러 마커 + 인포윈도우 표시

 - 여러 마크 표시하기 source 

<div id="map" style="width:100%;height:350px;"></div>

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

// 마커를 표시할 위치와 title 객체 배열입니다 
var positions = [
    {
        title: '카카오', 
        latlng: new kakao.maps.LatLng(33.450705, 126.570677)
    },
    {
        title: '생태연못', 
        latlng: new kakao.maps.LatLng(33.450936, 126.569477)
    },
    {
        title: '텃밭', 
        latlng: new kakao.maps.LatLng(33.450879, 126.569940)
    },
];

for (var i = 0; i < positions.length; i ++) { 
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng, // 마커를 표시할 위치
        title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
        image : markerImage // 마커 이미지 
    });
}
</script>

 

 - 마커에 인포윈도우 표시하기 source 

<scriopt>
// 지도생성
// 마커를 표시할 위치와 title 객체 배열입니다
  var positions = [
    {
      iwContent: "<div>카카오</div>",
      latlng: new kakao.maps.LatLng(33.450705, 126.570677),
    },
    {
      iwContent: "<div>생태연못</div>",
      latlng: new kakao.maps.LatLng(33.450936, 126.569477),
    },
    {
      iwContent: "<span>근린공원</span>",
      latlng: new kakao.maps.LatLng(33.451393, 126.570738),
    },
  ];
  
  for (var i = 0; i < positions.length; i++) {
    // 마커생성
    var marker = new kakao.maps.Marker({
      map: map, // 마커를 표시할 지도
      position: positions[i].latlng, // 마커를 표시할 위치
    });
    
    //인포윈도우생성
    var infowindow = new kakao.maps.InfoWindow({
      position: positions[i].latlng, //인포윈도우 위치
      content: positions[i].iwContent, //인포윈도우 내용
    });
    infowindow.open(map, marker);
  }
  </scriopt>

 

---

 - 조합하여 여러 마커와 여러 인포윈도우 Source 

<script>
//지도생성 
// 마커가 표시 위치입니다 
var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); 

// 마커를 생성합니다
var marker = new kakao.maps.Marker({
    position: markerPosition
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

var iwContent = '<div style="padding:5px;">Hello World! <br><a href="https://map.kakao.com/link/map/Hello World!,33.450701,126.570667" 
						style="color:blue" target="_blank">큰지도보기</a>
                        	<a href="https://map.kakao.com/link/to/Hello World!,33.450701,126.570667" style="color:blue" target="_blank">길찾기</a></div>', 
                            	// 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
    iwPosition = new kakao.maps.LatLng(33.450701, 126.570667); //인포윈도우 표시 위치
    
// 인포윈도우를 생성
var infowindow = new kakao.maps.InfoWindow({
    position : iwPosition, 
    content : iwContent 
});
  
// 마커 위에 인포윈도우를 표시. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker); 
</script>

 

 

 

 -> 결과

  : div의 넓이를 조절하고 싶어서 개발자 도구로 보았더니 별도의 id나 class가 없고 카카오 자체소스에서 element style div넓이를 정해 놓은듯 해보여 방법이 필요

음,, 안되네요.. 혹시 아시는분 댓글좀 남겨주세요 ⸝⸝• ̫•⸝⸝