개요
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 신규 계정 생성(생략) 후 웹사이트 접속
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-84.png?resize=866%2C488&ssl=1)
1-2. 첫 계정 가입 혜택, 활성화
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-85.png?resize=856%2C485&ssl=1)
1-3. 계정 정보 입력
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-86.png?resize=859%2C490&ssl=1)
1-4. 결제 정보 입력, 개인 Credit Card 필요
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-87.png?resize=868%2C489&ssl=1)
1-5. 가입 이후 화면, ‘My First Project’ 클릭
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-88.png?resize=867%2C491&ssl=1)
1-6. ‘My First Project’ 자동 생성 확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-89.png?resize=865%2C485&ssl=1)
2. 설정
2-1. ‘API 및 서비스’> ‘사용 설정된 API 및 서비스’ 클릭
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-90.png?resize=856%2C486&ssl=1)
2-2. ‘사용 설정된 API 및 서비스’ 초기 화면, 검색어 ‘maps javascript api’ 검색
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-91.png?resize=856%2C482&ssl=1)
2-3. 검색된 API 사용 클릭
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-92.png?resize=874%2C485&ssl=1)
2-4. ‘사용 설정된 API’ 확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-93.png?resize=857%2C485&ssl=1)
2-5. Places API 검색 및 사용 클릭
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/1-61.png?resize=859%2C483&ssl=1)
2-6. ‘사용 설정된 API’ 재확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-94.png?resize=866%2C486&ssl=1)
2-7. ‘사용자 인증 정보’ 클릭 후 확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-95.png?resize=868%2C488&ssl=1)
2-8. ‘사용자 인증 정보 만들기’> ‘API 키’ 클릭
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-96.png?resize=858%2C486&ssl=1)
2-9. 생성된 API 키 확인. 이후 스크린샷의 키는 변경됨.
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2024/02/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2024-02-07-093222.png?resize=1200%2C673&ssl=1)
2-10. ‘API 키 1개’ 생성됨 확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/1-62.png?resize=868%2C487&ssl=1)
3. 소스
3-1. 개발 편의를 위해 Visual Studio Code를 사용
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-98.png?resize=875%2C488&ssl=1)
3-2. 새 html 파일 생성
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-99.png?resize=861%2C486&ssl=1)
3-3. ‘!’를 입력하여 Tool 자동 완성 기능 이용
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-100.png?resize=866%2C486&ssl=1)
3-4. HTML 코드 확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-101.png?resize=853%2C486&ssl=1)
최종 소스
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번을 설정했다면 필수)
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-102.png?resize=864%2C484&ssl=1)
4. 테스트
4-1. 초기 화면
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-103.png?resize=855%2C479&ssl=1)
4-2. 검색어 입력
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-104.png?resize=859%2C477&ssl=1)
4-3. 결과 확인. state ~ zipcode 그리고 map
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-105.png?resize=861%2C485&ssl=1)
4-4. 주소 입력
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-106.png?resize=891%2C485&ssl=1)
4-5. 결과 확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-107.png?resize=877%2C476&ssl=1)
4-6. 한국 검색어 입력
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-108.png?resize=920%2C485&ssl=1)
4-7. 결과 확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-109.png?resize=869%2C480&ssl=1)
4-8. 캐나다 검색어 입력
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-110.png?resize=895%2C487&ssl=1)
4-9. 결과 확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-111.png?resize=870%2C486&ssl=1)
5. 추가설정(옵션)
5-1. ‘HTTP 리퍼러(웹사이트)’ 활성화 그리고 ‘PROTOCOL://HOST:PORT’를 입력하여 Key 사용 제한 가능
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-112.png?resize=871%2C488&ssl=1)
5-2. Key 사용이 제한되면 에러 발생 확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-113.png?resize=868%2C493&ssl=1)
5-3. 설정대로 소스를 기동하기 위해 VSC에서 ‘Live Server’를 활성화하여 정상 동작 확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/08/image-114.png?resize=866%2C490&ssl=1)
6. 참고URL
Place AutoComplete API
Place AutoComplete API Example
- https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
감사합니다 🙂