API key 받기
홈페이지에 구글 지도를 넣기 위해서는 가장 먼저 API key를 받아야 한다.
Google Maps Platform에 들어간다.
시작하기를 누른다.
원하는 제품을 선택하고 프로젝트를 선택한다.
결제 정보를 입력 하라고 하는데 결제 되는 것이 아니라 로봇인지 아닌지 구분하는 용도라고 한다. 당황하지 말고 입력하자. 12개월 무료 체험판을 사용하게 되는데 그렇다고 12개월 뒤에 자동 청구가 되지 않는다고 하니 걱정하지 말자.
REPORT THIS AD
원하는 API를 선택해야 하는데 평소에 자주 보이는 지도를 사용하기 위해서는 우선 먼저 Maps JavaScript API를 받아야 한다.
들어가서 ‘사용 설정’버튼을 누르면 이제 API key를 받을 수 있게 된다. 화면 왼쪽에서 ‘API 및 서비스’에 ‘사용자 인증 정보’를 클릭한다. 그리고 ‘API 키’를 선택한다.
클릭하면 API key가 생성되고 키 제한을 선택한다. API key의 사용을 제한하기 위해서다. 상황에 맞게 제한사항을 선택한다. 그리고 Select APIs를 클릭해서 Map JavaScript API를 클릭한다.
처음에 Places API를 쓰려고 Places API만 클릭해서 사용하려고 했는데 에러가 계속 발생해서 봤더니 기본적으로 Maps JavaScript API가 깔려 있어야 쓸 수 있다고 한다. 그래서 추가적인 기능은 Map JavaScript API를 깔고난 후 위 과정을 반복해서 추가로 쓰고 싶은 API만 선택해서 쓰면 된다.
Google map react에서 사용하기
가장 먼저 google map package를 다운 받아야 한다.
1
npm install --save google-maps-react
REPORT THIS AD
그리고 원하는 파일에서 import 하고 Map component를 원하는 위치에 사용한다.
기본 prop은 아래와 같이 돼있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Map, GoogleApiWrapper } from 'google-maps-react';
render() {
const mapStyles = {
width: '100%',
height: '100%',
};
return (
<Map
google={this.props.google}
zoom={8}
style={mapStyles}
initialCenter={{ lat: 0, lng: 0}}
/>
);
}
mapStyles라는 변수를 선언해서 그 안에서 style 관리를 해도 돼고 div로 한 번 더 감싸서 className을 줘서 sass로 관리해줘도 된다. lat과 lng에 각각 위도와 경도를 넣어주면 초기에 지도가 보이는 화면이 나온다. zoom에는 숫자 키우면 키울 수록 더 자세히 보인다. 가장 아래에 아래와 같이 export 해주고 ‘TOKEN HERE’자리에 아까 처음에 받은 API key를 넣어 준다.
1
2
3
export default GoogleApiWrapper({
apiKey: 'TOKEN HERE'
})(MapContainer
여기까지만 하면 지도만 표시된다. 여기서 구글지도에서 자주 보던 마크를 추가하고 싶다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
render() {
return (
<Map
google={this.props.google}
zoom={8}
style={mapStyles}
initialCenter={{ lat: 0, lng: 0}}
>
<Marker position={{ lat: 0, lng: 0}} />
</Map>
);}
REPORT THIS AD
위도와 경도 값을 지정해주면 아래와 같이 나오게 된다.
끝!!
ADVERTISEMENT
REPORT THIS AD
