반응형

 

<index.html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>카카오 Map 시작하기</title>

</head>

<body>

    <h1>Kakao Map</h1>

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

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은API키"></script>
    <script>
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
            mapOption = {
                center: new kakao.maps.LatLng(37.539922, 127.070609), // 지도의 중심좌표
                level: 6 // 지도의 확대 레벨
            };

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

        // 지도에 표시될 객체를 가지고 있을 배열입니다
        const locations = [
            { place:"건대입구역", lat: 37.539922, lng: 127.070609 },
            { place:"어린이대공원역", lat: 37.547263, lng: 127.074181 },
        ];

        for (var i = 0; i < locations.length; i++) {
            var marker = new kakao.maps.Marker({
                map: map,
                position: new kakao.maps.LatLng(locations[i].lat, locations[i].lng)
            });
        }

    </script>
</body>

</html>

 

 

<Kakao Maps API 예제들 공식페이지>

apis.map.kakao.com/

 

반응형

+ Recent posts