본문 바로가기

IT/Google

"Google API" Geocode - 구글 맵 위경도 검색 v2

by 910F 2016. 9. 12.

Google API를 이용한 geoCode 샘플 예제입니다.

주소를 통한 위경도 검색 및 위경도로 위치 검색이 가능합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Map</title>

<script src="http://maps.google.com/maps?file=api&v=2&hl=&key=" type="text/javascript"></script>

<script type="text/javascript">
        function fnAdjust() {
            var latitude = document.googleMap.latitude.value;
            var longitude = document.googleMap.longitude.value;
            alert(latitude);
            alert(longitude);
        }  
        function load() {  
            if (GBrowserIsCompatible()) {
                var map = new GMap2(document.getElementById("map"));
                map.addControl(new GOverviewMapControl());
                map.addControl(new GLargeMapControl());
                map.addControl(new GMapTypeControl());
                map.addControl(new GScaleControl());
                map.enableDoubleClickZoom();
                var center = new GLatLng(35.68205, 139.76789);
                map.setCenter(center, 15, G_HYBRID_MAP);
                geocoder = new GClientGeocoder();
                var marker = new GMarker(center, {
                    draggable: true
                }); 
                map.addOverlay(marker);
                document.getElementById("lat").value = center.lat().toFixed(5);
                document.getElementById("lng").value = center.lng().toFixed(5);    
                GEvent.addListener(marker, "dragend", function() {   
                    var point = marker.getPoint();  
                    map.panTo(point);   
                    document.getElementById("lat").value = point.lat().toFixed(5);   
                    document.getElementById("lng").value = point.lng().toFixed(5);  
                });     
                GEvent.addListener(map, "moveend", function() {  
                    map.clearOverlays();
                    var center = map.getCenter();  
                    var marker = new GMarker(center, {
                        draggable: true
                    });  
                    map.addOverlay(marker);  
                    document.getElementById("lat").value = center.lat().toFixed(5);   
                    document.getElementById("lng").value = center.lng().toFixed(5);     
                    GEvent.addListener(marker, "dragend", function() {  
                        var point = marker.getPoint(); 
                        map.panTo(point);  
                        document.getElementById("lat").value = point.lat().toFixed(5); 
                        document.getElementById("lng").value = point.lng().toFixed(5);  
                    });  
                });    
            }
        }     
        function showAddress(address) {   
            var map = new GMap2(document.getElementById("map"));   
            map.addControl(new GSmallMapControl());   
            map.addControl(new GMapTypeControl());   
            if (geocoder) {
                geocoder.getLatLng(  address,   function(point) {
                    if (!point) {  
                        alert(address + " not found");
                    } else {  
                        document.getElementById("lat").value = point.lat().toFixed(5);   
                        document.getElementById("lng").value = point.lng().toFixed(5); 
                        map.clearOverlays()
                        map.setCenter(point, 14);   
                        var marker = new GMarker(point, {
                            draggable: true
                        });  
                        map.addOverlay(marker);  
                        GEvent.addListener(marker, "dragend", function() {  
                            var pt = marker.getPoint(); 
                            map.panTo(pt);  
                            document.getElementById("lat").value = pt.lat().toFixed(5); 
                            document.getElementById("lng").value = pt.lng().toFixed(5);
                        });     
                        GEvent.addListener(map, "moveend", function() {  
                            map.clearOverlays();
                            var center = map.getCenter();  
                            var marker = new GMarker(center, {
                                draggable: true
                            });  
                            map.addOverlay(marker);  
                            document.getElementById("lat").value = center.lat().toFixed(5);   
                            document.getElementById("lng").value = center.lng().toFixed(5);   
                            GEvent.addListener(marker, "dragend", function() { 
                                var pt = marker.getPoint();
                                map.panTo(pt);
                                document.getElementById("lat").value = pt.lat().toFixed(5);   
                                document.getElementById("lng").value = pt.lng().toFixed(5);
                            });  
                        });  
                    }  
                });  
            }
        }
    </script>
    </head>

<body onload="load()" onunload="GUnload()">
    <div style="padding:15px 45px 10px 45px;">
        <div id="map" style="width:600px; height: 500px" style="display:block;"></div>
    </div>

<div style="padding:5px 45px 10px 85px;">
        <form name="googleMap" action="#" onsubmit="showAddress(this.address.value); return false">
        
            <table width="650">
            
                <tr>
                    <td colspan="5">
                        <input type="text" size="70" name="address" value="" />
                        <input type="submit" class="btn" value="Address Search" />
                    </td>
                    </tr>
            
                <tr height="10">
                    <td colspan="5"></td>
                    </tr>
            
                <tr>
                    <td width="117"><b>Latitude</b></td>
                    <td width="117">
                        <input id="lat" type="text" size="12" name="latitude" value="" />
                    </td>
                    <td width="117"><b>Longitude</b></td>
                    <td width="117">
                        <input id="lng" type="text" size="12" name="longitude" value="" />
                    </td>
                    <td width="182">
                        <input type="button" class="btn" value="Adjust" onclick="fnAdjust()" />
                    </td>
                    </tr>
            </table>
        </form>
    </div>
    </body>

</html>

저작자표시 변경금지 (새창열림)

'IT > Google' 카테고리의 다른 글

"Google Map API" 브라우져에서 현재 위경도 읽어와서 구글맵에 마커 표시하기 ( getCurrentPosition + Googlemap marker ) (0)	2016.09.13
"Google Map API" 구글맵 출발지 도착지 주소입력해서 길찾기 - v3 (2)	2016.09.13
"Google Map API" 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 (0)	2016.09.13
"Google API" Geocode - 주소로 위경도 검색 v3 (0)	2016.09.13
"Google Map API" 구글맵 마커 + 말풍선 - v2 (0)	2016.09.12

티스토리툴바