expo-maps로 앱에 지도 붙이기 — react-native-maps 대신 네이티브 지도 쓰기

가게 위치 하나 지도에 찍어서 보여주는 화면이 필요했다. 그동안은 react-native-maps를 썼는데, 요즘은 Expo가 직접 만든 expo-maps가 있다. iOS는 Apple Maps, Android는 Google Maps를 네이티브 모듈로 직접 붙인다. New Architecture 기반이라 예전처럼 브릿지 통하면서 느려지는 일이 없고, 설정도 간단해서 갈아탔다.

설치

npx expo install expo-maps

한 가지 주의할 점. expo-maps는 네이티브 코드가 들어가서 Expo Go에서는 안 된다. 개발 빌드(dev client)를 만들어야 하고, New Architecture가 켜져 있어야 한다. SDK 52 이상이면 기본으로 켜져 있다.

플랫폼별로 컴포넌트가 다르다

여기가 react-native-maps랑 가장 다른 지점이다. 하나의 <MapView>가 아니라, iOS용 AppleMaps.View와 Android용 GoogleMaps.View가 따로 있다. 각 OS의 네이티브 지도를 그대로 쓰기 때문이다.

import { AppleMaps, GoogleMaps } from 'expo-maps';
import { Platform, Text } from 'react-native';

export default function StoreMap() {
  const camera = {
    coordinates: { latitude: 37.5665, longitude: 126.978 },
    zoom: 15,
  };
  const markers = [
    { coordinates: { latitude: 37.5665, longitude: 126.978 }, title: '우리 가게' },
  ];

  if (Platform.OS === 'ios') {
    return <AppleMaps.View style={{ flex: 1 }} cameraPosition={camera} markers={markers} />;
  }
  if (Platform.OS === 'android') {
    return <GoogleMaps.View style={{ flex: 1 }} cameraPosition={camera} markers={markers} />;
  }
  return <Text>지도는 iOS/Android에서만 보여요</Text>;
}

cameraPosition으로 초기 중심 좌표와 줌을 잡고, markers 배열로 핀을 꽂는다. title, snippet을 넣으면 핀 탭했을 때 말풍선이 뜬다. 웹에서는 두 컴포넌트 다 없으니 Platform.OS 분기로 폴백을 꼭 깔아두자.

API 키는 Google만 필요하다

Apple Maps는 키가 필요 없다. iOS만 지원하는 앱이면 그냥 바로 쓰면 된다. 반면 Google Maps는 API 키를 config 플러그인에 넣어야 Android에서 지도가 뜬다.

{
  "expo": {
    "plugins": [
      ["expo-maps", {
        "requestLocationPermission": true,
        "locationPermission": "내 위치를 지도에 표시하는 데 사용됩니다"
      }]
    ],
    "android": {
      "config": { "googleMaps": { "apiKey": "YOUR_ANDROID_KEY" } }
    }
  }
}

키 깜빡하면 Android에서 지도 타일이 회색으로만 뜨고 에러도 안 나서 한참 헤맨다. 지도가 안 보이면 키부터 확인하자.

정리

expo-maps는 iOS=Apple Maps, Android=Google Maps를 네이티브로 붙인다. Expo Go 말고 dev 빌드 필요.
<MapView> 하나가 아니라 AppleMaps.View / GoogleMaps.View로 플랫폼 분기해야 한다.
cameraPosition으로 중심·줌, markers로 핀. 웹 폴백은 챙기자.
Apple Maps는 키 불필요, Google Maps만 API 키를 config 플러그인에 넣는다.

아직 베타라 API가 바뀔 수 있긴 한데, 단순히 위치 보여주는 용도라면 지금도 충분히 쓸 만하다.