API로 맵 띄우기

카카오맵이든 구글맵이든 API를 활용하면 보통 4단계로 나뉜다.

 

1단계:API 키 발급(API키는 지도를 불러올때 사용하는 고유식별키 정도로 인식하면 된다.)
구글맵 API 발급처:https://developers.google.com/maps?hl=ko
카카오 API 발급처:https://developers.kakao.com/

2단계:API 스크립트 참조
구글맵 예: <script src="http://maps.google.com/maps/api/js?key=발급받은 API키 넣기"></script>

 

3단계:View단(HTML)에서 지도들어갈 div 추가
구글맵 예: <div id="div_map" style="display:block;"></div>

4단계:자바스크립트 지도 function 추가
구글맵 예: function mapStart(){
                        var mapLatlng = new google.maps.LatLng(37.040957, 128.338503); // 좌표값(위경도)
                        var mapOption = {//옵션
                            zoom: 2 //지도 확대축소(클수록 확대됨)
                            center: mapLatlng, //센터위치
                            draggable: true,//드래그 가능 여부
                            label: true,//라벨
                            scrollwheel: true, //마우스 휠로 확대 축소 사용 여부
                            mapTypeControl: true, //맵 타입 컨트롤 사용 여부
                            //디폴트 맵 선택
                            mapTypeId: google.maps.MapTypeId.TERRAIN //로드 지형맵
                            //mapTypeId: google.maps.MapTypeId.ROADMAP //로드맵
                            //mapTypeId: google.maps.MapTypeId.HYBRID //위성맵
                            //mapTypeId: google.maps.MapTypeId.SATELLITE //위성맵
                        }
                       //지도영역에 추가
                        var map = new google.maps.Map(document.getElementById('div_map'), mapOption);
                }