자율 학습/학습
[카카오 맵 API] 여러 상점 마커 표시하기
60cod
2022. 10. 3. 17:41
카카오맵에서는 위도, 경도를 알려주지 않음..
url 가지고 위도, 경도 찾아주는 사이트 이용했다.
https://xn--yq5bk9r.com/blog/map-coordinates
지도 위도 경도
지도 위도 경도
xn--yq5bk9r.com
그리고 노가다로 상점의 위도, 경도를 찾아 정리함... 하
코드
<script type="text/javascript">
$(document).ready(function() {
var mapContainer = document.getElementById('map'); //지도 표시할 div
var mapOption = {
center: new kakao.maps.LatLng(37.5666805, 126.9784147), //지도의 중심 좌표 (서울 시청)
//center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3 //지도의 확대 레벨
};
//지도 생성
var map = new kakao.maps.Map(mapContainer, mapOption);
/* 마커 표시만 할 때
// 마커를 표시할 위치
var position = new kakao.maps.LatLng(37.5666805, 126.9784147);
// 마커 생성
var marker = new kakao.maps.Marker({
position: position,
clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않게
});
// 아래 코드는 위의 마커를 생성하는 코드에서 clickable: true 와 같이
// 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정한다.
// marker.setClickable(true);
// 지도에 마커 표시
marker.setMap(map);
*/
// 마커를 표시할 위치와 title 객체 배열
var positions = [
{title: '통인시장', latlng: new kakao.maps.LatLng(37.58077152702747, 126.97001701885708)},
{title: '돈암제일시장', latlng: new kakao.maps.LatLng(37.59174834958249, 127.01596066198934)},
{title: '장위골목시장', latlng: new kakao.maps.LatLng(37.610309498135756, 127.05130063514355)},
{title: '대림중앙시장', latlng: new kakao.maps.LatLng(37.491292073343146, 126.89951572013095)},
{title: '영등포전통시장', latlng: new kakao.maps.LatLng(37.51982514853337, 126.90844558312178)},
{title: '방학동도깨비시장', latlng: new kakao.maps.LatLng(37.665070091538375, 127.03509447081768)},
{title: '신창시장', latlng: new kakao.maps.LatLng(37.63942739642469, 127.0374526543774)},
{title: '인왕시장', latlng: new kakao.maps.LatLng(37.59091765075382, 126.94317814078633)},
{title: '영천시장', latlng: new kakao.maps.LatLng(37.56969800905759, 126.96266378901056)},
{title: '송화시장', latlng: new kakao.maps.LatLng(37.54938917628751, 126.83564490311379)},
{title: '대림시장', latlng: new kakao.maps.LatLng(37.58680133921453, 126.9177292362561)},
{title: '광장시장', latlng: new kakao.maps.LatLng(37.57002466257081, 126.99894049094267)},
{title: '후암시장', latlng: new kakao.maps.LatLng(37.550290412116816, 126.97608132717914)},
{title: '수유재래시장', latlng: new kakao.maps.LatLng(37.63153471197147, 127.02376342555033)},
{title: '금남시장', latlng: new kakao.maps.LatLng(37.548679648889134, 127.02279557992622)},
{title: '뚝도시장', latlng: new kakao.maps.LatLng(37.53779586634766, 127.05481277373133)},
{title: '자양골목식당', latlng: new kakao.maps.LatLng(37.53487723126269, 127.07915884893816)},
{title: '청량리종합시장', latlng: new kakao.maps.LatLng(37.57946370086875, 127.04063775316882)},
{title: '경동시장', latlng: new kakao.maps.LatLng(37.57927332663431, 127.0387447884474)},
{title: '우림시장', latlng: new kakao.maps.LatLng(37.47042982787731, 126.92042080764817)},
{title: '동원시장', latlng: new kakao.maps.LatLng(37.58978706562914, 127.08990543544049)},
{title: '공릉동도깨비시장', latlng: new kakao.maps.LatLng(37.62284441037925, 127.07712245391059)},
{title: '목동시장', latlng: new kakao.maps.LatLng(37.538309680057, 126.8664226746652)},
{title: '신영시장', latlng: new kakao.maps.LatLng(37.53301674678145, 126.83602025615613)},
{title: '남구로시장', latlng: new kakao.maps.LatLng(37.48990786623502, 126.8872467455324)},
{title: '고척근린시장', latlng: new kakao.maps.LatLng(37.50213427763597, 126.84979013441468)},
{title: '현대시장', latlng: new kakao.maps.LatLng(37.48650776259616, 126.94662225632459)},
{title: '남문시장', latlng: new kakao.maps.LatLng(37.47396846274825, 126.90067394262466)},
{title: '망원시장', latlng: new kakao.maps.LatLng(37.555297760373676, 126.90645109928094)},
{title: '마포농수산물시장', latlng: new kakao.maps.LatLng(37.56479489926096, 126.89849346513738)},
{title: '남성시장', latlng: new kakao.maps.LatLng(37.48833805721236, 126.97938018315494)},
{title: '원당종합시장', latlng: new kakao.maps.LatLng(37.47439812520147, 126.96588572031895)},
{title: '신원시장', latlng: new kakao.maps.LatLng(37.48257953670047, 126.92676208301944)},
{title: '마천중앙시장', latlng: new kakao.maps.LatLng(37.49815878765955, 127.1504099817577)},
{title: '방이시장', latlng: new kakao.maps.LatLng(37.5117690311377, 127.11362312613714)},
{title: '암사종합시장', latlng: new kakao.maps.LatLng(37.550856877890865, 127.12881051497183)},
{title: '서울중앙시장', latlng: new kakao.maps.LatLng(37.567366878816316, 127.01975868895717)},
{title: '둔촌역전통시장', latlng: new kakao.maps.LatLng(37.52740208195233, 127.13523673565534)},
{title: '관악신사시장', latlng: new kakao.maps.LatLng(37.48634639231171, 126.91683999247368)},
{title: '상계중앙시장', latlng: new kakao.maps.LatLng(37.65930963906117, 127.07041470962268)},
{title: '노룬산골목시장', latlng: new kakao.maps.LatLng(37.53657972201766, 127.06505827871703)},
{title: '화곡본동시장', latlng: new kakao.maps.LatLng(37.5432514761052, 126.84352942613403)},
{title: '청담삼익시장', latlng: new kakao.maps.LatLng(37.522473866573854, 127.0576929998352)},
{title: '도곡시장', latlng: new kakao.maps.LatLng(37.49748259291186, 127.05211899315765)},
{title: '대조시장', latlng: new kakao.maps.LatLng(37.60984444295215, 126.9277654974968)},
{title: '승인시장', latlng: new kakao.maps.LatLng(37.613308339826474, 127.02911713434159)},
{title: '방배종합시장', latlng: new kakao.maps.LatLng(37.48195959229509, 126.98369639821924)},
{title: '신세계백화점 잠실점', latlng: new kakao.maps.LatLng(37.50530393007134, 127.00432032914132)},
{title: '이마트 용산점', latlng: new kakao.maps.LatLng(37.52968020713107, 126.96578815303407)},
{title: '롯데마트 서울역점', latlng: new kakao.maps.LatLng(37.55600140455684, 126.97021255173684)},
{title: '이마트 미아점', latlng: new kakao.maps.LatLng(37.61083945157122, 127.02983195753896)},
{title: '현대백화점 미아점', latlng: new kakao.maps.LatLng(37.60847912961082, 127.02874377966087)},
{title: '홈플러스 영등포점', latlng: new kakao.maps.LatLng(37.51822898104671, 126.89588701243558)},
{title: '이마트 여의도점', latlng: new kakao.maps.LatLng(37.51830266013908, 126.92683125164737)},
{title: '이마트 창동점', latlng: new kakao.maps.LatLng(37.65178538786048, 127.04722245861775)},
{title: '홈플러스 방학점', latlng: new kakao.maps.LatLng(37.66484378779776, 127.04366281091853)},
{title: '현대백화점 신촌점', latlng: new kakao.maps.LatLng(37.5561498940956, 126.9358119986333)},
{title: '홈플러스 등촌점', latlng: new kakao.maps.LatLng(37.56019749997705, 126.84632350595024)},
{title: '이마트 가양점', latlng: new kakao.maps.LatLng(37.558187603364054, 126.86181483033789)},
{title: '이마트 역삼점', latlng: new kakao.maps.LatLng(37.4993006067195, 127.04839285792764)},
{title: '롯데백화점 강남점', latlng: new kakao.maps.LatLng(37.49695588875322, 127.05327661769762)},
{title: 'NC백화점 불광점', latlng: new kakao.maps.LatLng(37.60970098074412, 126.92891178184557)},
{title: '이마트 은평점', latlng: new kakao.maps.LatLng(37.60027103709861, 126.92016947552692)},
{title: '롯데백화점 본점', latlng: new kakao.maps.LatLng(37.56490559984811, 126.98174509331352)},
{title: '이마트 청계점', latlng: new kakao.maps.LatLng(37.57133810819965, 127.02179729119402)},
{title: '농협 하나로마트 용산점', latlng: new kakao.maps.LatLng(37.53321899970044, 126.96463251109209)},
{title: '롯데백화점 미아점', latlng: new kakao.maps.LatLng(37.61486850179021, 127.03050408607137)},
{title: '이마트 왕십리점', latlng: new kakao.maps.LatLng(37.56170031895132, 127.038731159125)},
{title: '이마트 성수점', latlng: new kakao.maps.LatLng(37.54012480293938, 127.05316701189673)},
{title: '이마트 자양점', latlng: new kakao.maps.LatLng(37.538409273227934, 127.07339205614171)},
{title: '롯데마트 강변점', latlng: new kakao.maps.LatLng(37.535862873285204, 127.0962174381835)},
{title: '홈플러스 동대문점', latlng: new kakao.maps.LatLng(37.57462779485764, 127.0387604938837)},
{title: '롯데백화점 청량리점', latlng: new kakao.maps.LatLng(37.58082337083145, 127.04767573458035)},
{title: '이마트 상봉점', latlng: new kakao.maps.LatLng(37.59642990726778, 127.09360037062652)},
{title: '홈플러스 면목점', latlng: new kakao.maps.LatLng(37.580516224153165, 127.08196496965813)},
{title: '롯데백화점 노원점', latlng: new kakao.maps.LatLng(37.655072890971674, 127.06132662658915)},
{title: '홈플러스 중계점', latlng: new kakao.maps.LatLng(37.640076476197876, 127.06867890097499)},
{title: '이마트 신도림점', latlng: new kakao.maps.LatLng(37.506712869778426, 126.89048327036669)},
{title: '홈플러스 시흥점', latlng: new kakao.maps.LatLng(37.452066879719496, 126.90091538291628)},
{title: '홈플러스 월드컵점', latlng: new kakao.maps.LatLng(37.56831607148286, 126.89858829664327)},
{title: '롯데백화점 영등포점', latlng: new kakao.maps.LatLng(37.51601120008291, 126.90728743343587)},
{title: '롯데백화점 관악점', latlng: new kakao.maps.LatLng(37.49043518903432, 126.92494973405901)},
{title: '세이브 마트', latlng: new kakao.maps.LatLng(37.47426993356951, 126.9177894354298)},
{title: '하나로클럽 양재점', latlng: new kakao.maps.LatLng(37.463586490382525, 127.04357263594515)},
{title: '롯데백화점 잠실점', latlng: new kakao.maps.LatLng(37.5120024149411, 127.0985484886795)},
{title: '홈플러스 잠실점', latlng: new kakao.maps.LatLng(37.5162801885539, 127.10299723704158)},
{title: '이마트 명일점', latlng: new kakao.maps.LatLng(37.55460109543551, 127.15597823639689)},
{title: '홈플러스 강동점', latlng: new kakao.maps.LatLng(37.54555082524402, 127.14222196066123)},
{title: '뉴코아아울렛 강남점', latlng: new kakao.maps.LatLng(37.50920692002358, 127.0075734110178)},
{title: '하나로클럽 미아점', latlng: new kakao.maps.LatLng(37.62154029567021, 127.02689112270227)},
{title: '이마트 목동점', latlng: new kakao.maps.LatLng(37.52555942312281, 126.87028724269722)},
{title: '신세계백화점 강남점', latlng: new kakao.maps.LatLng(37.5053039304019, 127.00431128133162)},
{title: '롯데슈퍼', latlng: new kakao.maps.LatLng(37.591302689102584, 126.941973106214)},
{title: '홈플러스 독산점', latlng: new kakao.maps.LatLng(37.46867455456224, 126.89696411429661)},
{title: '홈플러스 목동점', latlng: new kakao.maps.LatLng(37.53019742225537, 126.87327955487739)},
{title: '농협하나로마트 신촌점', latlng: new kakao.maps.LatLng(37.55618077592656, 126.93301429976847)},
{title: 'NC백화점 신구로점', latlng: new kakao.maps.LatLng(37.50114083231634, 126.88274239437952)},
{title: '이마트 이수점', latlng: new kakao.maps.LatLng(37.484373774217126, 126.98027675590568)}
];
// 마커 이미지의 이미지 주소
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (var i = 0; i < positions.length; i ++) {
// 마커 이미지의 이미지 크기
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지 생성
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀 표시됨
image : markerImage // 마커 이미지
});
}
}); // document ready end
</script>