카카오 지도서비스 API

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

예 )  

이 지도를 이용

1. 카카오지도 넣으려면 카카오특에서 제공한 샘플 코드를 복사해서 HTML아래 붙여준다.

 

<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=535068688f1a8bca1c21a9445ede0a89"></script>
<script>
      var markerPosition = new kakao.maps.LatLng(위도, 경도) // 위도경도에 좌표 넣어줌
      var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
          mapOption = { 
              center: markerPosition, // 지도의 중심좌표
              level: 3 // 지도의 확대 레벨
          };

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

      var imageSrc = "https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/2021_05_free_parents/sparta-marker.png"; 
      var imageSize = new kakao.maps.Size(65, 86); 
      var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 
      
      var marker = new kakao.maps.Marker({
          map: map,
          position: markerPosition,
          image : markerImage
      });

</script>

2. 지도가 들어갈 자리에 id="map" 추가해준다.

<div class="box">
    <div class="map" id="map"></div>
    <div class="story">
        <div class="img"></div>
        <h2>장소명이 들어갑니다.</h2>
        <h3>주소가 들어갑니다.</h3>
        <p>
            내용이 들어갈 곳입니다. 내용이 들어갈 곳입니다. 내용이 들어갈 곳입니다. 내용이 들어갈 곳입니다. 내용이 들어갈 곳입니다. 내용이 들어갈 곳입니다.
        </p>
    </div>
</div>