개요
Google Cloud Platform의 Maps JavaScript API, Places API 활용 사례를 공유합니다.
적용 가능 국가 : 미국(us), 한국(ko) 등 대부분
소스 : HTML, JavaScript ES6+(IE 미지원)
주의사항
JavaScript 소스의 GCP Key가 유출되지 않도록 주의가 필요합니다.
Key는 GCP에서 즉시 교체할 수 있고 기존 키는 24시간 이후부터 정상 동작하지 않습니다.
내용
- 1시작, 2설정, 3소스, 4테스트, 5추가설정 순으로 작성합니다.
1. 시작
1-1. Google 신규 계정 생성(생략) 후 웹사이트 접속
1-2. 첫 계정 가입 혜택, 활성화
1-3. 계정 정보 입력
1-4. 결제 정보 입력, 개인 Credit Card 필요
1-5. 가입 이후 화면, ‘My First Project’ 클릭
1-6. ‘My First Project’ 자동 생성 확인
2. 설정
2-1. ‘API 및 서비스’> ‘사용 설정된 API 및 서비스’ 클릭
2-2. ‘사용 설정된 API 및 서비스’ 초기 화면, 검색어 ‘maps javascript api’ 검색
2-3. 검색된 API 사용 클릭
2-4. ‘사용 설정된 API’ 확인
2-5. Places API 검색 및 사용 클릭
2-6. ‘사용 설정된 API’ 재확인
2-7. ‘사용자 인증 정보’ 클릭 후 확인
2-8. ‘사용자 인증 정보 만들기’> ‘API 키’ 클릭
2-9. 생성된 API 키 확인. 이후 스크린샷의 키는 변경됨.
2-10. ‘API 키 1개’ 생성됨 확인
3. 소스
3-1. 개발 편의를 위해 Visual Studio Code를 사용
3-2. 새 html 파일 생성
3-3. ‘!’를 입력하여 Tool 자동 완성 기능 이용
3-4. HTML 코드 확인
최종 소스
github : https://github.com/KimYunBeom/kdb/blob/main/gcp-address-autocomplete/gcp-address-autocomplete.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GCP Address AutoComplete</title>
<style>
.readonly {
background-color: gray;
}
</style>
</head>
<body>
<div>
<label for="search">search : </label>
<input type="text" name="search" id="search" size="60" maxlength="60" autofocus />
<span> | </span>
<label for="zoom">zoom : </label>
<input type="text" name="zoom" id="zoom" size="2" maxlength="2" value="17" />
<span> | </span>
<label for="country">country : </label>
<select name="country" id="country">
<option value="us">USA</option>
<option value="kr">Korea</option>
<option value="ca">Canada</option>
</select>
</div>
<div>
<label for="state">state : </label>
<input type="text" name="state" id="state" size="10" maxlength="10" readonly class="readonly" />
<span> | </span>
<label for="city">city : </label>
<input type="text" name="city" id="city" size="10" maxlength="10" readonly class="readonly" />
<span> | </span>
<label for="lat">latitude : </label>
<input type="text" name="lat" id="lat" size="10" maxlength="10" readonly class="readonly" />
<span> | </span>
<label for="lng">longitude : </label>
<input type="text" name="lng" id="lng" size="10" maxlength="10" readonly class="readonly" />
<span> | </span>
<label for="zip">zipcode : </label>
<input type="text" name="zip" id="zip" size="10" maxlength="10" readonly class="readonly" />
</div>
<hr />
<div id="map" style="height: 400px"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AI(중간생략)Mk"></script>
<script>
// initElemEvent
const initElemEvent = () => {
document.querySelector('#country').addEventListener('change', (evt) => {
initAddrAutoComplete(evt.target.value);
});
};
// initMap
let map = null;
let mapMarker = null;
const initMap = (lat = 39.10046516210457, lng = -94.57794725974294, zoom = 4) => {
const latLng = { lat, lng };
const mapOptions = {
center: latLng,
zoom,
};
map = new google.maps.Map(document.querySelector('#map'), mapOptions);
// initMapMarker
const initMapMarker = (latLng) => {
mapMarker = new google.maps.Marker({
position: latLng,
map,
title: `${lat}, ${lng}`,
});
};
initMapMarker(latLng);
};
// initAddrAutoComplete
const initAddrAutoComplete = (thisCountry) => {
const autoCompleteOptions = {
componentRestrictions: { country: [thisCountry] },
fields: ['address_components', 'geometry'],
};
const fillInAddress = () => {
if (!placesAutoComplete.getPlace()) {
return;
}
const addrGeoLoc = placesAutoComplete.getPlace().geometry.location;
const addrComp = placesAutoComplete.getPlace().address_components;
if (addrGeoLoc) {
const latVal = Number(addrGeoLoc.lat());
const lngVal = Number(addrGeoLoc.lng());
const zoomVal = Number(zoom.value);
lat.value = latVal;
lng.value = lngVal;
initMap(latVal, lngVal, zoomVal);
}
for (const comp of addrComp) {
const type = comp.types[0] ? comp.types[0] : '';
if (type) {
const shortName = comp.short_name;
if (type === 'locality') {
city.value = shortName;
}
if (type === 'administrative_area_level_1') {
state.value = shortName;
}
if (type === 'postal_code') {
zip.value = shortName;
}
}
search.focus();
}
};
const placesAutoComplete = new google.maps.places.Autocomplete(search, autoCompleteOptions);
placesAutoComplete.addListener('place_changed', fillInAddress);
};
const init = () => {
initElemEvent(); // 초기화 : Element 이벤트
initMap(); // 초기화 : 맵
initAddrAutoComplete(document.querySelector('#country').value); // 초기화 : 주소 자동완성
};
init();
</script>
</body>
</html>3-5. VSC EXTENSIONS 중 Live Server를 Install하여 html 파일에서 ‘Go Live’ 버튼으로 실행(아래 5번을 설정했다면 필수)
4. 테스트
4-1. 초기 화면
4-2. 검색어 입력
4-3. 결과 확인. state ~ zipcode 그리고 map
4-4. 주소 입력
4-5. 결과 확인
4-6. 한국 검색어 입력
4-7. 결과 확인
4-8. 캐나다 검색어 입력
4-9. 결과 확인
5. 추가설정(옵션)
5-1. ‘HTTP 리퍼러(웹사이트)’ 활성화 그리고 ‘PROTOCOL://HOST:PORT’를 입력하여 Key 사용 제한 가능
5-2. Key 사용이 제한되면 에러 발생 확인
5-3. 설정대로 소스를 기동하기 위해 VSC에서 ‘Live Server’를 활성화하여 정상 동작 확인
6. 참고URL
Place AutoComplete API
Place AutoComplete API Example
- https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
감사합니다 🙂