Google Map API

04 May 2021 in Web Dev on PHP

• Google map API를 js에서도 사용해 보고, php에서도 사용할 것이다.
• static web만 제공되는 서비스를 이용한다면 전자를, 아니면 아무거나 쓰면 될듯하다.
• Documentation-Samples 에 가면 여러가지 예시 코드가 나와있다.
• 사용하고 싶은 기능을 선택해서 예시코드 ALL을 선택해 붙여넣으면 된다.

Google API 서비스 가입하기

• api key를 준다.

• https://developers.google.com/maps/gmp-get-started#create-project

  

1. Simple Map

• https://developers.google.com/maps/documentation/javascript/examples/map-simple

• 제공된 전체 코드를 html 파일에 붙여넣고, 내 API키를 넣어주면 다음과 같은 화면이 뜬다.

• 전체 코드는 여기서!

https://developers.google.com/maps/documentation/javascript/examples/map-simple#all

• 전체 코드 맨 아래에 있는 이 부분이 중요! 여기서 YOUR_API_KEY에 내 API 키 정보를 넣어준다.

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

• 위에 API key 안 넣어주면 다음과 같이 된다. 안 뜸.

처음 시작시 지도 표시 위치 변경하기

• https://developers.google.com/maps/documentation/javascript/examples/map-simple#all
• 이 코드 부분의 function initMap() {} 안center: {lat : , lng:} 의 값을 바꿔준다. (위도, 경도다.)

• 구글에 검색하면 특정 위치의 위도 경도 나온다!

• 캘리포니아의 위도 경도 넣기. 그럼 처음 지도가 로드될 때 캘리포니아를 보여준다.

지도에 마커 표시하기

• https://developers.google.com/maps/documentation/javascript/examples/marker-simple

• initmap 안에 다음을 추가해준다.

  new google.maps.Marker({
      position: { lat: 34.052235, lng: -117.9981 },
      map,
      title: "Hello World!",});
  

  

맵 스타일 변경하기

• https://mapstyle.withgoogle.com/ 여기서 마음에 드는 스타일을 선택한다. 그리고 JSON 을 복사!

function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 5,
          styles: ;//복사한 json 코드 넣어주기!
                    });

2. Geolocation

• https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
• 현재 사용자의 위치를 알 수 있다.
• 코드는 여기서 https://developers.google.com/maps/documentation/javascript/examples/map-geolocation#all