리액트에서 Google Maps API(구글맵 API) 사용하기(+ 커스텀 마커)

공부 계기 📚

개인 프로젝트 원더렌즈 개발 중, Home 화면에 구글맵 API를 추가하고자 했다.
 
1. Google Maps API(구글맵 API) 추가
2. 갔던 여행지에 색상 추가
 

중요 포인트 ✧

1. API 키값 발급받아 <script>에 넣기
2. 공식 문서에 있는 코드 React hooks로 수정하기 
 

활용 예시 🪄

1. API 키값 발급받아 Script에 넣기

    <script
      src="https://maps.googleapis.com/maps/api/js?key=%VITE_MAP_API_KEY%&loading=async&libraries=marker"
      async
    ></script>

 
index.html에 있는 script에 API와 key값을 입력했다. key값은 깃허브에 올렸을 때 노출되지 않기 위해 .env파일에 넣었기에 변수명을 사용했다.
 

2. 공식 문서에 있는 코드 React로 수정하기

초반부엔 당황했지만, 이미 다른 분들이 작성한 코드와 공식문서를 참고하면 맞게 수정할 수 있다.

import { useCallback, useEffect, useRef } from "react";

const locations = [
  { title: "vancouver", position: { lat: 49.2576182, lng: -123.2887105 } },
  { title: "vietnam", position: { lat: 14.073694, lng: 108.413399 } },
  { title: "mongolia", position: { lat: 47.0008262, lng: 103.0839711 } },
];

function Home() {
  const mapRef = useRef(null);

  const initMap = useCallback(() => {
    const map = new window.google.maps.Map(mapRef.current, {
      center: { lat: 40.397, lng: 150.644 },
      zoom: 2,
      mapId: "DEMO_MAP_ID",
    });

    const mapPin = "/mapPin.svg";

    locations.forEach((location) => {
      new window.google.maps.Marker({
        // new window.google.maps.marker.AdvancedMarkerElement({
        map,
        position: location.position,
        title: location.title,
        icon: mapPin,
      });
    });
  }, [mapRef]);

  useEffect(() => {
    initMap();
  }, [initMap]);

  return (
    <div
      className="map"
      style={{ width: "100vw", height: "600px" }}
      ref={mapRef}
    ></div>
  );
}

export default Home;

 

 
좌표값으로 찍어줄 위도와 경도는 구글맵에서 찾았다.
 
 

추가 개념 📃

useRef를 예전에 배웠는데, 잊어버렸다. 근데 이번에 map을 불러올 때 사용해서 다시 한번 공부한다.
 
useRef란 React의 Hook함수로 특정 DOM을 선택해야 하는 상황에 사용한다. 보통 Javascript를 사용할 땐 getElementById 또는 querySelector같은 Dom selector를 사용해 선택한다.
 
input에 포커스가 잡히도록 할 때 useRef를 자주 사용한다.
 
위의 코드에서 mapRef는 구글 지도가 렌더링될 DOM요소를 참조한다.
 
 
 

참고 자료

https://developers.google.com/maps/documentation/javascript/overview?hl=ko#maps_map_simple-javascript

개요  |  Maps JavaScript API  |  Google for Developers

 
https://react.vlpt.us/basic/10-useRef.html

10. useRef 로 특정 DOM 선택하기 · GitBook

 
 

배운 것

공식문서를 꼼꼼하게 읽는 것의 중요성을 깨달았다. 또 한번 지도 띄우는것을 성공하니 다른 것도 천천히 접근하면 잘 할 수 있을 것 같다!