[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>