-
[google map api]주소 --> 위,경도 변환JAVASCRIPT 2016. 12. 22. 21:46반응형
안녕하세요.
업무를 하다보면 주소로 위경도를 알아야할때도 있고 , 반대의 경우도 있지요??
일단 이번엔 주소로 -> 위,경도를 추출해온 스크립트랍니다!
사용방법 및 이해는 직접 소스를 보면 세상에서 가장 빠르고 쉽게 될거라 생각합니다 ^^
---------------------------------------------------------------------------------------------
<!-- GoogoleMap Asynchronously Loading the API -->
<?
$address1 = $_REQUEST["address"];
$arr_address = explode("(",$address1);
$address = $arr_address[0];
?>
<!DOCTYPE html>
<html>
<head>
<title>google map</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style>
html,body,#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel1 {
position: absolute;
top: 5px;
left: 40%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#panel {
position: absolute;
top: 40px;
left: 40%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=false"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom : 17,
center : new google.maps.LatLng(37.5651, 126.98955), //서울
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
google.maps.event.addListener(map, 'click', addLatLng);
}
google.maps.event.addDomListener(window, 'load', initialize);
var geocoder;
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var lat = results[0]['geometry']['location']['lat']();
var lng = results[0]['geometry']['location']['lng']();
//alert(address+"의 위도는 " + lat + " 이며, 경도는" + lng + " 입니다.");
$("#lat").val(lat)
$("#lng").val(lng)
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable:false,
animation:google.maps.Animation.DROP,
title:address
});
} else {
alert('Geocode was not successful for the followingreason: ' + status);
}
});
}
function addLatLng(event) {
var latLng = event.latLng;
latLng = latLng.toString();
latLng = latLng.substring(1,latLng.length-1);
latLng = latLng.split(",");
//alert("현재 위치의 위도는 "+ latLng[0] + " 이며, 경도는" + latLng[1] + " 입니다.")
$("#lat").val(latLng[0])
$("#lng").val(latLng[1])
var marker = new google.maps.Marker({
map: map,
position: event.latLng,
draggable:false,
animation:google.maps.Animation.DROP,
title:address
});
}
function Save(){
$("#lat",opener.document).val($("#lat").val());
$("#lng",opener.document).val($("#lng").val());
self.close();
}
</script>
</head>
<body>
<div id="panel1">
위도 : <input type="textbox" name="lat" id="lat" >
경도 : <input type="textbox" name="lng" id="lng" >
<input type="button" value="저장" onclick="Save()">
</div>
<div id="panel">
<input id="address" type="textbox" style="width:400px; "value="<?=$address?>">
<input type="button" value="검색" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</body>
</html>
---------------------------------------------------------------------------------------------
위 소스를 웹 페이지에 그대로 복붙!!! ㅎㅎㅎ
참고 URL입니다
https://developers.google.com/maps/documentation/geocoding/intro?hl=ko
키워드 : google map geocoding , google map 지오코딩 ,google map 역 지오코딩
등등등~~
반응형'JAVASCRIPT' 카테고리의 다른 글
구글&&다음 지도 정리되어있음 (0) 2016.12.28 모바일 웹 -> 전화걸기 (0) 2016.12.28 쿠키값 저장,불러오기, 삭제 (0) 2016.12.28 모바일 웹 -> 현재 위치 가져오기 (0) 2016.12.27 텍스트의 길이를 확인하는 함수 (0) 2015.06.23