구글에서 제공하는 지도를 사용하려면 우선 회원가입을 한 뒤에 API Key를 발급 받아야 한다.
시작을 눌러주고
서비스 약관 동의해주기
눌러주세용
동의하기 누르고 계속 클릭
결제 정보를 입력해줘야 하는데 어차피 google api 사용은 하루에 2,500건, 초당 10건의 요청에 한해서만 무료. 그 이상 사용하려면 유료로 전환하면 되는 거라서 결제는 되지 않는다.
결제 정보를 입력하고 맨 아래 하단에 무료로 시작하기 클릭
이것도 입력해주고 제출하기
요렇게 api 키가 발급이 됐다.
다음을 눌러주고
API 키가 원치 않는 곳에서 사용되지 않도록 제한 설정이 가능한데
나중에도 설정할 수 있으니 나중에 버튼을 클릭해줍시다
이제 Google Cloud Platform 관리 페이지로 넘어오고
API 키 관리나 각종 설정등이 가능합니다.
나는 내가 직접 리뷰를 올리고 위치를 안내 해주면 되는 것이라 비교적 쉽게 사용할 수 있었다.
테이블을 생성할 때 위도와 경도 컬럼을 넣어주고, 관리자 글을 쓸 때 위도, 경도를 직접 입력해서 내용을 보여줄 때 그 값을 꺼내기만 하면 됐었다.
reviewWrite.jsp에서 값을 입력하도록 하기.
<script src="https://maps.googleapis.com/maps/api/js?key=<구글api key입력>&callback=initMap" async defer></script>
reviewContents.jsp 내용을 보여주는 페이지에서 상단에 구글 apiKey입력 해주기
html부분에는 지도 크기만 지정을 해두고 id값을 준다.
function initMap() {
// 1. 위도와 경도 값을 담은 객체 생성
// parseFloat은 문자열로 전달된 위도와 경도를 숫자로 변환하는 함수.
const position = {
lat: parseFloat("${rv.latitude}"), // 위도 값
lng: parseFloat("${rv.longitude}") // 경도 값
};
// 2. 지도 생성
// HTML에서 id가 "map"인 요소에 지도를 표시.
// zoom: 지도의 확대 수준을 설정 (15이면 상세 보기 수준).
// center: 지도의 중심 위치를 설정 (위도, 경도 값 사용).
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 15, // 지도의 확대 레벨 (숫자가 클수록 더 확대됨)
center: position, // 지도 중심을 'position'으로 설정
});
// 3. 지도에 마커 추가
// 마커(marker)는 특정 위치를 지도에 표시하는 아이콘.
const marker = new google.maps.Marker({
position: position, // 마커를 표시할 위치
map: map, // 마커를 표시할 지도 객체
title: "Location", // 마커에 마우스를 올리면 표시되는 텍스트
});
}스크립트 부분에 함수를 선언한다.
구글 지도를 초기화하고 특정 위치(위도와 경도 값을 통해서)를 지도에 보여줄 수 있도록 한다.
해당 위치를 정확하게 표시하기 위해서 마커 기능도 추가했다.
이렇게 하면 페이지에 동적으로 해당 위치의 지도와 마커가 표시가 됩니다!
