Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

Posts List

2012년 3월 11일 일요일

[Google API] 구글 맵 API(v3)

구글Map API v3의 간단한 예제입니다.
설명이 한글로 잘 되어있네요. 예제도 다양하고, 무엇보다 따로 인증 같은 것을 받을 필요가 없군요. 지오코딩도 콜백함수를 함수내에서 자체적으로 처리하도록 되어있는것 같습니다.
좌표계도 다음맵과 동일한 좌표계를 사용하는군요.

예제코드는 아래와 같습니다.
한가지 주의해야 할 것은 이 API는 HTML5로 작성해야 한다는 군요.

api인증키나 다른 조치 없이 바로 사용이 가능 합니다.
(2017년 5월 16일 추가). API키가 필요하네요. 제일 아래부분에 추가한 내용 참고하시기 바랍니다.

<!-- Google Map API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=YOUR_API_KEY"></script>

<!-- Code -->
<script type="text/javascript">
    /** Google Map 객체. **/
    GoogleMap = {
        /* 초기화. */
        initialize : function() {
            this.input = document.getElementById("GoogleMap_input");
            this.address = document.getElementById("GoogleMap_addr");
            this.geocoder = new google.maps.Geocoder();
            this.infowindow = new google.maps.InfoWindow();
               
            //지도 생성.(기본 위치 서울.)
            var latlng = new google.maps.LatLng(37.56641923090,126.9778741551);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            this.map = new google.maps.Map(
                    document.getElementById("GoogleMap_map"),myOptions);
                
            //마커 생성.
            this.marker = new google.maps.Marker({
                map : this.map,
                animation: google.maps.Animation.DROP
            });
        },
        /* 주소 검색.(지오코딩) */
        codeAddress : function() {
            var address = this.input.value;
            //콜백 함수 호출.
            this.geocoder.geocode( { 'address': address}, 
                           function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    //검색 된 주소 목록.
                    GoogleMap.address.innerHTML = "";
                    var ul = document.createElement('ul');
                    for(var i=0; i<results.length; i++){
                        var li = document.createElement('li');
                        var a = document.createElement('a');
                         
                        a.href = "#";
                        a.innerHTML = results[i].formatted_address;
                        GoogleMap.clickAddress(a, results[i].geometry.location,
                                results[i].formatted_address);
                        
                        li.appendChild(a);
                        ul.appendChild(li);
                    }
                    GoogleMap.address.appendChild(ul);
                }
            });
        },
        //주소 클릭 이벤트.
        clickAddress : function(a, addr,content){
            a.onmousedown = function(){
                //지도와 마커이동.
                GoogleMap.map.setCenter(addr);
                GoogleMap.marker.setPosition(addr);
                GoogleMap.marker.setAnimation(google.maps.Animation.DROP);
                GoogleMap.infowindow.setContent(content);
                GoogleMap.infowindow.open(GoogleMap.map,GoogleMap.marker);
            }
        }
    }
    window.onload = function(){
        GoogleMap.initialize();
    }
</script>
HTML 태그.
<div>
    <div id="GoogleMap_map" style="width:500px; height:500px; float:left;">
    </div>
    <div style="height:500px; padding-left: 10px;">
        <div>
            <input id="GoogleMap_input" type="textbox" value="" onkeydown="javascript:if(event.keyCode == 13) GoogleMap.codeAddress();" >
            <input type="button" value="Enter" onclick="javascript:GoogleMap.codeAddress()">
        </div>
        <div id="GoogleMap_addr"></div>
    </div>
</div>
제가 블로그에 쓰기위에 좀 더 수정한 [Blog] 구글 지도를 이용한 블로그 지도 만들기도 같이 참고해서 보시면 좋을 듯 합니다.

2017년 5월 16일

이전에는 구글맵을 쓰는데 API키를 발급 안받아도 썼던거 같은데 오늘 확인하니 API키가 없을 경우 에러가 나네요. (참고 : 구글맵 API 가이드)

구글콘솔에서 API키를 발급 받으신 후 위 소스 상단 구글맵 Javascript 라이브러리를 로드 하는 부분에 API키를 입력해 주시면 됩니다.
<script src="http://maps.google.com/maps/api/js?sensor=true&key=YOUR_API_KEY" type="text/javascript"></script>

댓글 2개:

  1. 안녕하세요 구글맵관련하여 혹시 아실까 하여 문의합니다.
    저희 회사에서 운영하고 있는 사이트에 구글맵 API를 연동하였는데요
    일본지역에 TRANSIT이 작동되지 않아서요
    혹시 이유를 알고 계신지요. 로컬쪽에 물어도 답도없고
    원래 BETA라서 안되는건지 혹시 아신다면 정보 쉐어 부탁드립니다.

    감사합니다. kmdkbt@gmail.com

    답글삭제
    답글
    1. 아, 제가 공부하는 과정에서 몇번 적용해본 것 밖에 없어서요.
      상세한 것 까지는 잘 알지는 못합니다.
      도움이 못 될 것 같네요. 죄송합니다. ^^;;

      삭제