Google Maps 관련 API 사용기

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

Google Maps Platform 문서  |  Maps JavaScript API  |  Google Developers

 

일단 먼저 링크로 들어갑니다. 

 

일단 저기서 천천히 따라하시면 됩니다. 

근데 일단 빠르게 진행을 해보려면 

 

 

 index.html에 아래 코드를 넣어줍니다. 

<script
    src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_API_KEY%&v=weekly"
    defer
></script>

그리고 저기 src에 API를 추가해줘야하는데 React를 사용하실때 환경변수를 통해 HTML에서 사용하고 싶으면 저렇게

%환경변수 이름%을 추가하면 된다고 하더라구요.

 

 

 

https://stackoverflow.com/questions/49375867/how-do-you-reference-a-process-env-variable-in-html-script-src-react

How do you reference a process.env variable in HTML <script src="" ? React

그리고 모달 안에는 문서에서 주는 기본 뼈대 코드를 이용해 구현했습니다. 여기서 props로 center에는 문서에서 예제로 주는 { lat: -25.344, lng: 131.031 } 를 넣어주고 zoom은 16을 넣었을때가 제일 이뻐서 그렇게 넣어주었습니다.

 

 

 

주소를 이용한 구글맵 좌표 얻기

아 그런데 항상 저희가 저렇게 하드코딩된 좌표를 가지고 올 수 있는 법이 아니죠. 그래서 주소만 입력하면 좌표를 뱉어주게끔 서버해서 해줘야하는데요. Geocoding API를 사용하면 되겠습니다.

 

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

Google Maps Platform 문서  |  Geocoding API  |  Google Developers

const request = require("requestify");
const HttpError = require('../models/http-error');

// API KEY 가져오기
require("dotenv").config();
const API_KEY = process.env.GOOGLE_API_KEY

async function getCoordsForAddress(address) {
  console.log(API_KEY);
  const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=${API_KEY}`;
  
  const response = await request.get(url);

  const data = response.getBody();
  
  if(!data || data.status === 'ZERO_RESULTS') {
    const error = new HttpError('Could not find location for the specified address.', 422);
    throw error;
  }
  
  const coordinates = data.results[0].geometry.location;

  return coordinates;
}

module.exports = getCoordsForAddress;

여기서 희안하게 Axios를 안쓰고 requestify라는 라이브러리를 가져와 HTTP 요청을 했는데, Axios로는 제대로된 좌표가 안 가져와져서 대체 방안으로 해결한 경우입니다.