구글지도 서비스 웹 예제) 구글맵+주소 검색 (주소->위도 경도)
유용한 소스
구글맵처리
지도에서 클릭시 해당 주소 표기
주소를 이용하여 위도 경도 표기
소스) 일부 불필요한 부분 삭제
<?//<!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>
<!-- test1 -->
<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">
<!--
<tr height="80">
<td colspan="3"
valign="top" align=center><?//include_once($lcTmplGvPathSet."/mb/common_top_popup_image.php");?></td>
</tr>
-->
<?//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 ?>
<!--
<tr height="20">
<td colspan="2"><a href="<?=$gvDomainHttps?>/mb/region_start.php?div=<?=$div?>&outcome=<?=$outcome?>"><img src="/mb/images/region/start_region_search.jpg" width="<?=((399/800)*100)?>%" border="0"></a><a href="<?=$gvDomain?>/mb/region_start_my_position.php?div=<?=$div?>&outcome=<?=$outcome?>"><img src="/mb/images/region/start_my_position_search.jpg" width="<?=((401/800)*100)?>%" border="0"></a></td>
</tr>
-->
<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>
<!-- Replace the value of the key parameter with your own API key. -->
<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>
<!--
<td width="18%" style="padding-right:3pt" >
<input type="button" value="검색" style="width:100%; height:25pt;"
onclick="searchPosition();">
</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>
