[PHP 7] 구글맵 api 사용하기

김와앙·2023년 11월 2일

API

PHP 7

목록 보기

17/20

https://developers.google.com/maps?hl=ko

api 제공 사이트

지도, 경로, 장소로 api 종류가 세분화 되어있다.
난 웹에 사용할 것이기 때문에
웹에 사용하는 동적지도, 지도 SDK 선택해준다.

=> 들어가면 간단한 샘플과 사용법 확인 가능!

+) js,html,css 를 각각 복사해서 위치에 잘 붙여넣어주어야한다.

api 사용을 위해선 key 가 필요하다.

구글맵 api key 발급 받는 곳
https://console.cloud.google.com/welcome/new?project=steam-spider-403906&hl=ko
유료 서비스이긴 하나 제한 아래에선 무료로 이용가능
결제 안하더라도 카드등록 필요.

등록한 후에, <새 프로젝트> 누르고 내가 만드려는 프로젝트 생성.

30-40초 정도 소요 후에 프로젝트가 만들어진다.

그리고, 만들어진 키를

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

' YOUR_API_KEY '에 대입해서 넣어준다.

api 사용자 인증 정보 만들기

다른 사람이 내 API 를 사용하지 못하게 하기 위해서 이 과정을 거친다.
일종의 사용자 제한 설정을 하는 것이라고 보면 된다.
세가지 방식이 있는데 그 중에 API 키로 하는 것이 가장 간단하기 때문에
API key 를 사용한다.
상단의 <사용자 인증 정보 만들기> 를 클릭한 후 생성해주면 내가 사용 가능한 키 정보가 나온다.

여기에서, 추가로 , 내가 만든 API 키를 특정 웹사이트로 제한해야한다.

굳이 도메인 주소가없어도 사용하는 localhost 주소를 입력해도 사용가능하다.

API 서비스 사용 가능하게 설정하기

설정을 다 마치고 나서는, 내가 사용하는 해당 API 를 ENABLE 하도록 설정해줘야 최종적으로 사용가능하다.

결과

실행 시 구글맵 api 가 잘 실행 되는 것을 볼 수있다.

+) 시작 위치 바꾸는 방법

기본이 시드니로 되어있는데 다른 위치를 시작 위치로 하고 싶을 때는?

구글맵에 들어간 후 원하는 위치 검색 - 오른쪽 마우스 - '이곳이 궁금한가요?'
파란 길찾기 버튼 클릭.
위도 값, 경도 값 나옴. - 복사
코드에 해당 위도, 경도 값을 넣어 준다.

<script>
.
.
	map = new Map(document.getElementById("map"), {
    center: { lat: 37.49649, lng: 126.9572}, //시작 위치
    zoom: 8, //값이 커질 수록 위치에 가까워짐.
  });
  .
  .
</script>

초기 위치 변경된 결과 확인!

++) 마커 추가하기

https://developers.google.com/maps/documentation/javascript/markers?hl=ko

🔼참고 , 그 외 기능들도 찾아서 복붙 사용하면 된다.

    const image ="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
 	 const beachMarker = new google.maps.Marker({
   	 position: { lat: 위도, lng: 경도 },
    	map,
    	icon: image,
  });