카카오맵 이미지 마커 + 커스텀 오버레이 (마커 클릭시 해당장소로 이동)

* 화면확인

https://umings.github.io/images/map_sample.html

 

------

 

https://apis.map.kakao.com/web/sample/markerWithCustomOverlay/

위 링크를 참고해 카카오맵 마커 이미지 변경 + 이미지 클릭시 해당 장소 카카오맵으로 이동하는 소스.

 

1. 카카오맵 api 발급받기

- 카카오맵에 아주 친절하게 잘 설명되어있음

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

 

2. 지도에 표출하고자 하는 곳의 위도, 경도 찾기

https://dday.tistory.com/616

카카오맵 위도 경도 찾기 방법 (kakao map)

 

3. 해당 장소의 url 찾기

 

 3-1. 카카오맵 (https://map.kakao.com/)에 접속해서 해당 장소 검색. 검색 후 마커 클릭

3-2. 상세보기 클릭

3-3. 주소표시줄의 맨 끝 숫자들 = 아이템아이디. 복사해두기

 

4. 지도를 그릴 html에 소스 삽입.

- script 삽입 src에 발급받은 api key 넣기

- 1번에서 찾은 위도와 경도를 각각 맞게 넣기 (위도, 경도 라고 써진곳 모두 동일한 위도, 경도 넣기)

- 마커 이미지 src 맞추기, 마커 이미지 크기 맞추기

- 커스텀 오버레이에 표출될 내용~ 쪽의 itemId=아이템아이디  에 3번에서 복사해둔 아이템아이디 넣기.

<div id="map" style="width:800px; height:400px;">
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"></script>
    <script>
      var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
        mapOption = {
          center: new kakao.maps.LatLng(위도, 경도), // 지도의 중심좌표
          level: 4 // 지도의 확대 레벨
        };
      var map = new kakao.maps.Map(mapContainer, mapOption);
      var imageSrc = 'images/i_map_marker.png', // 마커이미지의 주소입니다    
        imageSize = new kakao.maps.Size(43, 59), // 마커이미지의 크기입니다
        imageOption = {
          offset: new kakao.maps.Point(20, 50)
        }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

      // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
      var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
        markerPosition = new kakao.maps.LatLng(위도, 경도); // 마커가 표시될 위치입니다
      var marker = new kakao.maps.Marker({
        position: markerPosition,
        image: markerImage // 마커이미지 설정 
      });
      // 마커가 지도 위에 표시되도록 설정합니다
      marker.setMap(map);

      // 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
      var content = '<a href="https://map.kakao.com/?itemId=아이템아이디" target="_blank" class="map_link">' +
        '  </a>';

      // 커스텀 오버레이가 표시될 위치입니다 
      var position = new kakao.maps.LatLng(위도, 경도);

      // 커스텀 오버레이를 생성합니다
      var customOverlay = new kakao.maps.CustomOverlay({
        map: map,
        position: position,
        content: content,
        yAnchor: 1
      });
    </script>
  </div>

 

5. 커스텀 오버레이 css 수정

- 커스텀 오버레이로 생성되는 a태그 크기를 마커 이미지와 동일하게 직접 지정해줘야함.

- 커스텀 오버레이가 생성됬을때 마커 이미지와 약간 위치가 틀어지는 경우, position relative를 준 후에 left, top값을 조정해 마커 이미지 위에 위치하도록 수정 필요.

#map .map_link{display: block; width: 43px; height: 62px;}

 

* 샘플소스 (서울역)

아래 소스에서 api키만 본인에 맞게끔 수정하면 됨.

 

See the Pen Untitled by publisher.kim (@publisherkim) on CodePen.