React에서 구글맵 API 사용하기

구글맵 API를 사용하려면 우선 개인이 API KEY를 발급 받아야 한다. 

 

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

해당 사이트에서 'Maps JavaScript API'를 선택해 계정을 만들고, API 키를 발급받을 수 있다. 

구글 정책이 바뀌면서 무료로 API를 사용하는 사람들도 결제 수단을 등록해야 지도가 정상적으로 띄워진다. 

 

API키를 발급 받았다면, 리액트에서 어떻게 쓰는지 알아보자.

 

먼저 구글맵 컴포넌트를 다운받아야 한다. 

npm install google-maps-react --save

 

그 후, 구글맵을 담을 컴포넌트에 아래 값을 주면 된다. 

import React, { Component } from "react";
import { Map, GoogleApiWrapper } from "google-maps-react";
import "./MapAPI.scss";
 
class MapAPI extends Component {
  render() {
    return (
      <div className='MapAPI'>
        <Map
          google={this.props.google}
          zoom={15}
          initialCenter={{ lat: 37.5, lng: 127 }}
        ></Map>
      </div>
    );
  }
}
 
export default GoogleApiWrapper({
  apiKey: "개인API키",
})(MapAPI);