<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넓이를 정해 놓은듯 해보여 방법이 필요
