Mentoring Service: 8월 2017

자바스크립트로 주소를 입력하여 위도 경도 가져오기 - 구글 맵 서비스 이용, 지오코딩

<div id="locationField">
<input id="autocomplete" placeholder="주소를 입력하세요~" type="text" style="width:95%; height:30px">
</div>
<input class="field" id="lat" />
<input class="field" id="lng" />
<script src="https://maps.googleapis.com/maps/api/js?key=구글에서 발급받으신 키를 입력하세요&libraries=places&callback=initAutocomplete" async defer></script>

<script>
var placeSearch, autocomplete;
function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),{types: ['geocode']});
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
var place = autocomplete.getPlace();
document.getElementById("lat").value=place.geometry.location.lat();
document.getElementById("lng").value=place.geometry.location.lng();
}
</script>

주소를 입력하시고 선택하시면 위도 경도 값이 입력필드에 들어가게 돼요

즐거운 시간 보내세요~

구글지도 서비스 웹 예제) 구글맵+주소 검색 (주소->위도 경도)

유용한 소스
구글맵처리
지도에서 클릭시 해당 주소 표기
주소를 이용하여 위도 경도 표기

소스) 일부 불필요한 부분 삭제

<?//<!DOCTYPE html>?>

<html<?// lang="ko"?>>

<script src="http://maps.google.com/maps/api/js?sensor=true&key=<?=$gvGoogleMapKey?>"></script>

<script>

var lcAddrName = ""; //위치 주소

var markers = [];

var map;
var latitude = getCookie( "current_latitude" );
var longitude = getCookie( "current_longitude" );

//alert("위도("+latitude+"), 경도("+longitude+")");

if(latitude=="" || longitude==""){

latitude = "37.5665350";
longitude = "126.9779690";
setCookie( "current_latitude", latitude, 365);
setCookie( "current_longitude", longitude, 365);
}

<?if($div=="S"){?> <?//대여 위치?>
setCookie( "rent_region_latitude", latitude, 365);
setCookie( "rent_region_longitude", longitude, 365);
<?}else if($div=="E"){?> <?//반납 위치?>
setCookie( "return_region_latitude", latitude, 365);
setCookie( "return_region_longitude", longitude, 365);
<?}?>

function initialize() {
var mapLocation = new google.maps.LatLng( latitude, longitude); // 지도에서 가운데로 위치할 위도와 경도
var markLocation = new google.maps.LatLng( latitude, longitude); // 마커가 위치할 위도와 경도

var mapOptions = {
center: mapLocation, // 지도에서 가운데로 위치할 위도와 경도(변수)
zoom: 18, // 지도 zoom단계
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), // id: map-canvas, body에 있는 div태그의 id와 같아야 함
mapOptions);

var size_x = 60; // 마커로 사용할 이미지의 가로 크기
var size_y = 60; // 마커로 사용할 이미지의 세로 크기

// 마커로 사용할 이미지 주소
var image = new google.maps.MarkerImage( 'http://www.larva.re.kr/home/img/boximage3.png',
new google.maps.Size(size_x, size_y),
'',
'',
new google.maps.Size(size_x, size_y));

var marker;
marker = new google.maps.Marker({
position: markLocation, // 마커가 위치할 위도와 경도(변수)
map: map,
icon: image, // 마커로 사용할 이미지(변수)
// info: '말풍선 안에 들어갈 내용',
title: '내위치' // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀
});

//위치정보 셋팅
getGoogleAddr(latitude, longitude);
//document.all.ID_SELECTED_ADDR.innerText = "서울시 은평구 응암동 88번지";
markers.push(marker);

var content = "내위치 <br/> 자세한 위치를 선택하세요~"; // 말풍선 안에 들어갈 내용

// 마커를 클릭했을 때의 이벤트. 말풍선 뿅~
var infowindow = new google.maps.InfoWindow({ content: content});

google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});

document.all.autocomplete.value="";

}

google.maps.event.addDomListener(window, 'load', initialize);

function placeMarker(location) {

<?if($div=="S"){?> <?//대여 위치?>
setCookie( "rent_region_latitude", location.lat());
setCookie( "rent_region_longitude", location.lng());
<?}else if($div=="E"){?> <?//반납 위치?>
setCookie( "return_region_latitude", location.lat());
setCookie( "return_region_longitude", location.lng());
<?}?>

//마커 모두 지우기
setMapOnAll(null);

var marker = new google.maps.Marker({
position: location,
map: map
});

map.setCenter(location);

//위치정보 셋팅
getGoogleAddr(location.lat(), location.lng());
//document.all.ID_SELECTED_ADDR.innerText = "서울시 은평구 응암동 88번지";
markers.push(marker);
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}

//구글의 주소를 가져간다 (역지오코딩)
//http://doit2day.tistory.com/33
//http://blog.naver.com/PostView.nhn?blogId=ttingwow1&logNo=20141598139
//https://developers.google.com/maps/documentation/javascript/geocoding?hl=ko
function getGoogleAddr(lat, lon){

var geocoder = new google.maps.Geocoder();

//geocoder를 사용하기 위해 변수를 선언하고 구글 맵 api에서 객체를 얻어 옵니다.

var latlng = new google.maps.LatLng(lat, lon);

//위도와 경도를 구글 맵스의 geocoder에서 사용할 형식으로 변환합니다.

geocoder.geocode({'latLng' : latlng}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

//좌표를 주소로 변환 시키는 geocoder를 실행합니다
//만약 성공적으로 변환이 되었다면, status라는 상태변수가 참이 되어 아래의 코드들이 실행됩니다
if (results[0]) { //0~7까지 존재
//forAddress.innerHTML = results[3].formatted_address;

//document.all.ID_SELECTED_ADDR.innerText = results[0].formatted_address;

setCookie( "current_latitude", lat, 365);
setCookie( "current_longitude", lon, 365);

lcAddrName = results[0].formatted_address;
lcAddrName = jsStringReplace(lcAddrName, "대한민국 ", "");
lcAddrName = jsStringReplace(lcAddrName, "대한민국", "");

document.all.ID_SELECTED_ADDR.innerText = lcAddrName;

//만약 반환된 결과값이 비어있지 않으면 innerHTML을 이용해 결과값을 출력합니다.
}
} else {
//임시주석 처리 : alert("Geocoder failed due to: " + status);
//만약 geocoder가 실패시 알림창을 출력합니다.
}
});

}
//위치 적용하기
function applyPosition(){
//구글로 부터 주소를 가져온 경우
if(lcAddrName==""){
alert("위치를 먼저 선택하세요~ (주소가 선정되어야 적용이 돼요) ");
return;
}

if(lcAddrName.indexOf("서울")==-1 && lcAddrName.indexOf("경기도")==-1 && lcAddrName.indexOf("인천")==-1){
alert("서울, 경기, 인천 지역만 렌트 신청이 가능해요");
return;
}

<?if($div=="S"){?> <?//대여 위치?>
setCookie( "rent_div", "PR");
setCookie( "rent_region_addr", unescape(lcAddrName));

//location.href="<?=$gvDomainHttps?>/mb/main.php?topmenu=Y";

location.href="<?=$gvDomainHttps?>/mb/region_start.php?div=E&topmenu=Y&outcome=<?=$outcome?>";
<?}else if($div=="E"){?> <?//반납 위치?>
setCookie( "return_div", "PR");
setCookie( "return_region_addr", unescape(lcAddrName));

//location.href="<?=$gvDomainHttps?>/mb/main.php?topmenu=Y";

glb_rent_start_date = getCookie( "rent_start_date");
if(glb_rent_start_date==""){
alert("대여일을 선택하세요~");
return;
}
glb_rent_start_hm = getCookie( "rent_start_hm");
if(glb_rent_start_hm==""){
alert("대여시간을 선택하세요~");
return;
}
glb_rent_end_date = getCookie( "rent_end_date");
if(glb_rent_end_date==""){
alert("반납일을 선택하세요~");
return;
}
glb_rent_end_hm = getCookie( "rent_end_hm");
if(glb_rent_end_hm==""){
alert("반납시간을 선택하세요~");
return;
}
glb_rent_div = getCookie( "rent_div");
if(glb_rent_div==""){
alert("대여지역을 선택하세요~");
return;
}
glb_return_div = getCookie( "return_div");
if(glb_return_div==""){
alert("반납지역을 선택하세요~");
return;
}

<?if($outcome=="Y"){?>
goSelect('33');
<?}else{?>
location.href="<?=$gvDomainHttps?>/mb/car_species.php?frame=1&outcome=<?=$outcome?>";
<?}?>
<?}else{?>
location.href="<?=$gvDomainHttps?>/mb/main.php?topmenu=Y&outcome=<?=$outcome?>";
<?}?>
}
//차량선택 페이지로 이동한다
function goSelect(parm){

glb_rent_start_date = getCookie( "rent_start_date"); //대여 시작 일자
glb_rent_start_hm = getCookie( "rent_start_hm"); //대여 시작 시분
glb_rent_end_date = getCookie( "rent_end_date"); //대여 종료 일자
glb_rent_end_hm = getCookie( "rent_end_hm"); //대여 종료 시분

var dtStartYear = Number(glb_rent_start_date.substring(0, 4));
var dtStartMonth = Number(glb_rent_start_date.substring(4, 6));
var dtStartDay = Number(glb_rent_start_date.substring(6, 8));
var dtStartHour = Number(glb_rent_start_hm.substring(0, 2));
var dtStartMinute = Number(glb_rent_start_hm.substring(2, 4));

var dtEndYear = Number(glb_rent_end_date.substring(0, 4));
var dtEndMonth = Number(glb_rent_end_date.substring(4, 6));
var dtEndDay = Number(glb_rent_end_date.substring(6, 8));
var dtEndHour = Number(glb_rent_end_hm.substring(0, 2));
var dtEndMinute = Number(glb_rent_end_hm.substring(2, 4));

var startDate = new Date(dtStartYear, dtStartMonth+1, dtStartDay, dtStartHour, dtStartMinute, 00);
var endDate = new Date(dtEndYear, dtEndMonth+1, dtEndDay, dtEndHour, dtEndMinute, 00);
var vlMinute = (endDate.getTime() - startDate.getTime()) / 60000; // 분 단위로 변경
var vlHour = ((endDate.getTime() - startDate.getTime()) / 60000) / 60; // 시간 단위로 변경
//alert("분 (" + vlMinute + ") 시간 (" + vlHour + ")");
lcHourCnt = Math.floor(vlHour / 24);

//alert("24시간 갯수 : " + lcHourCnt);
var vlHourAddCnt = Math.floor(vlHour % 24);
//alert("24시간 이외 추가시간 : " + vlHourAddCnt);

//요일 수 계산
var lcVlYoilCnt = fnDateGetSatSun(glb_rent_start_date, glb_rent_end_date);
//alert(lcVlYoilCnt);
setCookie( "holiday_cnt", lcVlYoilCnt); //공휴일 수

glb_rent_start_date = getCookie( "rent_start_date"); //대여 시작 일자
parm = parm + "&start_date=" + glb_rent_start_date;
parm = parm + "&day_cnt="+lcHourCnt; //일수
parm = parm + "&add_hour_cnt="+vlHourAddCnt; //추가 시간
parm = parm + "&holiday_yoil_cnt=" + lcVlYoilCnt; //주말 요일 수 (토, 일)
location.href="/mb/car_select.php?car_species_select=" + parm;
}

//두 날짜 사이의 요일 수를 출력해준다
//parm d1 : 20170101
//parm d2 : 20171003
//getSatSun(d1, d2)
function fnDateGetSatSun(d1, d2) {
var sDate=lcDateFormatDate(d1);
var eDate=lcDateFormatDate(d2);
//alert(lcDateCountDay(sDate,eDate));

var count = 0;

count = lcDateCountDay(sDate,eDate);

return count;
}
function lcDateFormatDate(d) {
return new Date(d.substr(0,4),Number(d.substr(4,2))-1,Number(d.substr(6)));
}
function lcDateCountDay(d1,d2) {
var count=0;
var tmp;
for (var i=0; i<=(d2-d1)/1000/60/60/24; i++) {
tmp=new Date(d1);
tmp.setDate(tmp.getDate()+i);
//0(일요일), 5(금요일), 6(토요일)
if (tmp.getDay()==0 || /*tmp.getDay()==5 ||*/ tmp.getDay()==6) {
count++;
}
}
return count;
}
</script>



<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<?
//공통 _ 상단정보 (이미지 + 팝업 메뉴)
//include_once($lcTmplGvPathSet."/mb/common_top.php");
?>

<table id="id_top" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">



<?//title?>
<tr height="20" bgcolor="#ffffff">
<td colspan="2" style="padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px"
onclick="history.back();">
<?if($div=="S"){?>
<img src="/mb/images/region/title_start.jpg" width="100%" border="0">
<?}else if($div=="E"){?>
<img src="/mb/images/region/title_end.jpg" width="100%" border="0">
<?}?>
</td>
</tr>

<?// tab button ?>


<script>
var placeSearch, autocomplete;
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object
var place = autocomplete.getPlace();
document.getElementById("lat").value=place.geometry.location.lat();
document.getElementById("lng").value=place.geometry.location.lng();

<?if($div=="S"){?> <?//대여 위치?>
setCookie( "rent_region_latitude", place.geometry.location.lat() );
setCookie( "rent_region_longitude", place.geometry.location.lng() );
<?}else if($div=="E"){?> <?//반납 위치?>
setCookie( "return_region_latitude", place.geometry.location.lat() );
setCookie( "return_region_longitude", place.geometry.location.lng() );
<?}?>

getGoogleAddr(place.geometry.location.lat(), place.geometry.location.lng());

//지도로 이동한다
placeMarker(place.geometry.location);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=<?=$gvGoogleMapKey?>&libraries=places&callback=initAutocomplete" async defer></script>
<?//http://fatc.club/2017/06/05/1949?>
<input class="field" id="lat" style="width:0px; height:0px"/>
<input class="field" id="lng" style="width:0px; height:0px" />
<tr height="20">
<td colspan="2">
<table width="100%" height="30px" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="82%" style="padding-left:10pt; padding-right:5pt">
<div id="locationField">
<input id="autocomplete" name="autocomplete" placeholder="검색할 주소를 입력하세요~" type="text" style="width:100%; height:29pt">
</div>
</td>


</tr>
</table>
</td>
</tr>

<tr height="50pt" bgcolor="#ffffff">
<td colspan="2" style="padding-left:10pt">

<?if($div=="S"){?>
렌트
<?}else if($div=="E"){?>
반납
<?}?>
주소 :
<span id="ID_SELECTED_ADDR"></span>

</td>
</tr>

<tr height="1px" bgcolor="#D3D3D3"><td colspan="2"></td></tr>

<tr <?//height="270pt"?> bgcolor="#ffffff">
<td colspan="2">

<div id="map-canvas" style="width:100%; height:<?//270pt?>100%"></div>

</td>
</tr>

<tr height="1px" bgcolor="#D3D3D3"><td colspan="2"></td></tr>

<?//적용하기 버튼?>
<tr height="20">
<td colspan="2" onclick="applyPosition();"><img src="/mb/images/region/btn_apply.jpg" width="100%" border="0"></td>
</tr>
</table>

</body>
</html>

Mentoring Service

2017년 8월 31일 목요일

자바스크립트로 주소를 입력하여 위도 경도 가져오기 - 구글 맵 서비스 이용, 지오코딩

html, 자바스크립트 > 내일의 날짜 가지고 가기

구글지도 서비스 웹 예제) 구글맵+주소 검색 (주소->위도 경도)

2017년 8월 18일 금요일

자바스크립트 오늘 날짜 출력

2017년 8월 14일 월요일

자바스크립트 두 날짜 사이의 특정요일들의 갯수

2017년 8월 10일 목요일

안드로이드 키보드 바로 올라오게 하기, 키보드 올리기, 내리기