Google Maps API 이용해서 지도에 마커 추가하기

동동주·2025년 1월 18일
Google Maps API마커프론트
2
post-thumbnail

SK Lookie MnM 팀의 CamCoder 프로젝트 때 적용했던 Google Maps API를 이용하여 지도에 마커 추가하는 방법에 대해서 소개해보려고 합니다!
어려운 기능은 아니지만 버전이 계속해서 업데이트되면서 바뀐 게 많아서.. 구글링을 해도 예전 버전이 많이 나오더라구요 그래서 최신 버전으로 정리해보겠습니다!

Google Maps 공식 문서를 참고했습니다

package.json 속성 추가

"dependencies": {
    "@react-google-maps/api": "^2.20.3",
    }

google maps api를 적용하기 위해 속성을 추가합니다.

마커를 사용할 페이지 수정

import문

저는 해당 코드를 UnivMap.jsx에 추가했습니다.

import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';

google maps api를 적용할 수 있도록 import문을 추가합니다.

map 형식으로 여러 데이터 처리

제 프로젝트 같은 경우는 마커를 찍을 위치가 세 곳이었고 운영을 하면서 추후에 위치가 추가될 경우를 고려해 해당 기능을 Map으로 반복 처리하여 구현하였습니다.


const UnivMap = () => {
    const universityData = [
        {
            name: '동덕여자대학교',
            address: '백주년기념관 B1 꽃이피움 CAFE 앞',
            operatingHours: '10:00 - 21:00',
            contact: 'camcoder2024.official@gmail.com',
            googleMapLink: 'https://www.google.co.kr/maps/place/%EC%B9%B4%ED%8E%98+%EA%BD%83%EC%9D%B4%ED%94%BC%EC%9B%80+%EB%8F%99%EB%8D%95%EC%97%AC%EB%8C%80%EC%A0%90/data=!4m6!3m5!1s0x357cbc817884c247:0x86b18b311e341150!8m2!3d37.6058314!4d127.0404708!16s%2Fg%2F11g0kj81g2?hl=ko&entry=ttu&g_ep=EgoyMDI0MTAyOS4wIKXMDSoASAFQAw%3D%3D',
            position: { lat: 37.60585, lng: 127.0405 },
        },
        {
            name: '서울여자대학교',
            address: '샬롬하우스 기숙사 1층',
            operatingHours: '10:00 - 21:00',
            contact: 'camcoder2024.official@gmail.com',
            googleMapLink: 'https://www.google.co.kr/maps/place/%EC%84%9C%EC%9A%B8%EC%97%AC%EC%9E%90%EB%8C%80%ED%95%99%EA%B5%90+%EC%83%AC%EB%A1%AC%ED%95%98%EC%9A%B0%EC%8A%A4/data=!4m10!1m2!2m1!1z7ISc7Jq47Jes64yAIOyDrOuhrOq4sOyImeyCrA!3m6!1s0x357cb90851fcc7df:0x22c3ab6cee74d86f!8m2!3d37.6289458!4d127.0888736!15sChzshJzsmrjsl6zrjIAg7IOs66Gs6riw7IiZ7IKskgEPaG91c2luZ19jb21wbGV44AEA!16s%2Fg%2F11ryqyy02x?entry=ttu&g_ep=EgoyMDI0MTAyOS4wIKXMDSoASAFQAw%3D%3D', // 실제 구글맵 링크를 여기에 추가
            position: { lat: 37.6290817, lng: 127.0888200 },
        },
        {
            name: '세종대학교',
            address: '서울 광진구 능동로 209',
            operatingHours: '10:00 - 21:00',
            contact: 'camcoder2024.official@gmail.com',
            googleMapLink: 'https://www.google.co.kr/maps/place/%EC%84%B8%EC%A2%85%EB%8C%80%ED%95%99%EA%B5%90/data=!3m1!4b1!4m6!3m5!1s0x357ca4d0720eecc1:0x1a7ad975c6b5e4eb!8m2!3d37.5507583!4d127.0741682!16s%2Fm%2F0ddhhlj?entry=ttu&g_ep=EgoyMDI0MTAyOS4wIKXMDSoASAFQAw%3D%3D', // 실제 구글맵 링크를 여기에 추가
            position: { lat: 37.55100, lng: 127.0742 },
        },
    ];

먼저 제가 개발하고 있는 프로젝트는 제가 재학 중인 학교 한 곳과 연계되어 있는 두 곳, 총 3곳의 데이터를 관리합니다. 

const universityData

여기서 universityData는 나중에 return 값에서 부를 변수명이라고 이해하시면 편할 것 같습니다.
저는 지도뿐만 아니라 해당 위치의 운영시간, 연락처 등을 표시하고 싶었기 때문에 여러 데이터를 담았습니다.

return 값으로 반환

위에서 정리한 값을 이제 return 으로 적절히 사용하면 됩니다.

return (
        <Container>
            <Title>학교별 캠코더 맵</Title>
            {universityData.map((university, index) => (
                <UnivItem key={index}>
                    <MapContainer>
                        <LoadScript googleMapsApiKey="YOUR_API_KEY">
                            <GoogleMap mapContainerStyle={containerStyle} center={university.position} zoom={15}>
                                <Marker position={university.position} />
                            </GoogleMap>
                        </LoadScript>
                    </MapContainer>
                    <InfoContainer>
                        <TextContainer>
                            <UniversityName>{university.name}</UniversityName>
                            <LinkText href={university.googleMapLink} target="_blank" rel="noopener noreferrer">
                                구글맵링크
                            </LinkText>
                        </TextContainer>
                        <InfoText>운영공간 | {university.address}</InfoText>
                        <InfoText>운영시간 | {university.operatingHours}</InfoText>
                        <InfoText>문의 | {university.contact}</InfoText>
                    </InfoContainer>
                </UnivItem>
            ))}
        </Container>
    );

여기서 <MapContainer>는 실제로 마커가 찍혀 표현되는 지도를 관리하고 <InfoContainer>는 지도 옆에 글로 설명해주는 부분을 의미합니다. 즉 여러분들은 <MapContainer> 부분만 주의깊게 보시면 됩니다!

  1. LoadScript
  • 구글맵 api 키를 이용하여 Google Maps를 로드하는 컴포넌트입니다.
  • api 키는 googleMapsApiKey 속성으로 전달됩니다.
  1. googleMapsApiKey
  • 여기서 googleMapsApiKey는 따로 발급받아서 "YOUR_API_KEY"에 입력하셔야 합니다!
  • 해당 공식 사이트에 들어가면 api키 발급 방법이 나와있습니다.
  1. Marker position={university.position}
  • 가장 중요한 마커 위치와 관련된 부분입니다.
  • 이 부분은 위에서 정의한 경도와 위도, 즉 position: { lat: 37.6290817, lng: 127.0888200 } 이 값을 불러와서 마커를 찍게 됩니다. 나타내고 싶은 위치에 따라 정확한 값만 입력해주시면 됩니다.
  1. zoom={15}

  • zoom={15}는 구글 맵의 확대 수준(Zoom Level)을 설정하는 속성입니다.

  • 이 값은 지도의 시야 범위를 결정합니다. 숫자가 클수록 지도가 더 가까워지고, 숫자가 작을수록 지도가 더 멀리 보여줍니다.

  • Zoom Level의 범위
    1: 세계 지도 수준 (아주 멀리서 볼 때)
    5: 대륙 수준
    10: 도시 수준
    15: 거리 수준
    20 이상: 건물 상세 수준

    생각보다 간단한 기능이지만.. 구글링을 해봤을 때는 어떤 분은 markerF.. 어떤 분은 advancedMarkerElement를.. 사용해야한다 등등 예전 버전이 섞인 여러 버전이 있어서 생각보다 시간이 오래 걸렸습니다ㅎ..ㅎ 심지어 너무 안돼서 포기하고 있던 찰나에, 그 다음날 일어나서 다시 사이트를 확인해보니 정상적으로 마커가 표시되고 있어서 이게 뭐지?! 했던 기억이 있네요 다른 분들은.. 한번에 성공하길 바랍니다~!

profile
동동주
이전 포스트

1.1 운영체제

다음 포스트

Redis로 refreshToken 관리하기

0개의 댓글