https://duopix.co.kr/google-map-key/
구글지도 API 키 발급 받는 방법 - 듀오픽스
구글 지도 플랫폼 사이트에 접속, 구글맵 API키 발급 받기, 구글지도, 회사 지도, 약도, 구글 맵 API 키를 특정 사이트에서만 사용할 수 있도록 HTTP 리퍼러를 설정해주어야 합니다. 유료화 이후 사
duopix.co.kr
1. 위사이트 참고하여 가입 후 api받기(+api사용 제한해야함 )
일단 아래로 로컬 확인 하는 사이트 넣어 놓음
http://localhost:3000
2. index.html <head>위쪽에 아래 코드 넣어서 api 받아오기
YOUR_API_KEY 부분은 발급받은 키로 수정
▼ 아래코드로 이용! 오류때문에 밑에꺼로 사용하기 (이유는 아래쪽에 작성함)
이 방법x 콘솔오류
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
이 방법O
<script src="https://maps.googleapis.com/maps/api/js?key=키입력" async defer>
</script>
3. jsx에 코드 작성
import { useCallback, useEffect, useRef} from 'react';
function ZetaCnMap() {
const mapRef = useRef(null);
const initMap = useCallback(() => {
new window.google.maps.Map(mapRef.current, {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}, [mapRef]);
useEffect(() => {
initMap();
}, [initMap]);
return (
<div
className="map"
style={{ width: '500px', height: '500px' }}
ref={mapRef}
></div>
);
}
export default ZetaCnMap;
방법 참고 사이트:
React Hooks / 리액트 훅스로 구글맵 API 초간단하게 적용해보자!
리액트 훅스 버전으로 구글 맵을 띄워보는 작업을 해보겠습니다! 1. Google Maps API 발급하기 구글 맵스 플랫폼 사이트에 접속합니다 cloud.google.com/maps-platform/?hl=ko Geolocation API | Google Maps Pl..
cotist.tistory.com
마커생성 방법 참고:
Adding a Google Map with a Marker to Your Website | Maps JavaScript API | Google Developers
Send feedback Adding a Google Map with a Marker to Your Website Introduction This tutorial shows you how to add a simple Google map with a marker to a web page. It suits people with beginner or intermediate knowledge of HTML and CSS, and a little knowledge
developers.google.com
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=eyeballss&logNo=221176105091
[React] 구글맵 사용하기
Google map을 위한 key를 갖고 있고, react 프로젝트가 express 위에서 돌아가고 있다는 전제를 두고 읽기...
blog.naver.com
+ 콘솔에 오류 해결 (index.html에 태그 변경)
&callback=initMap 제거해서 아래와 같이 입력 변경
<script src="https://maps.googleapis.com/maps/api/js?key=키입력" async defer>
</script>
Google Maps - Uncaught InvalidValueError: initialise is not a function
When I load the page that my Google Maps is displayed, I always see the following error in the console: Uncaught InvalidValueError: initialise is not a function js?sensor=false&callback=init...
stackoverflow.com
'cbp 프로젝트 진행' 카테고리의 다른 글
| [2022.07.16](2) json중첩 사용된 데이터 불러오기 오류 (0) | 2022.07.16 |
|---|---|
| [2022.07.16](1) 버튼클릭시 해당 map과 내용보이기, json데이터 중 없는 내용은 안 보이게 설정 오류/index에 따른 컴포넌트 보이게 설정 오류 (0) | 2022.07.16 |
| 카카오 맵 불러오기 방법 (0) | 2022.07.15 |
| [2022.07.15] css flex사용 시, 오른쪽 배치된 요소 안 글자는 왼쪽으로 배치 오류 / json data의 id에 +숫자0 출력 오류 (0) | 2022.07.15 |
| [2022.07.14] SCSS @use사용시 변수 안 불러와지는 오류/ 배열에 img src담고 해당 index시 변경될 때 오류/SCSS파일여러개적용시class오류 (0) | 2022.07.14 |
