React Native Maps 价格

Question

I am making an app using react native and I want to implement a map using react-native-maps library MapView.

The application will use the map to display markers on it for users using signals to share it with multiple users.

I don't want a dynamic map or something just tiles.

I don't understand how pricing works, I read some people say it's free others say it's not.

I would like some explanation on how MapView works in real application with a large number of users.

import { StyleSheet, Text, View, Button } from "react-native";
import MapView, {
  PROVIDER_GOOGLE,
  MAP_TYPES,
  PROVIDER_DEFAULT,
  UrlTile,
  Marker,
} from "react-native-maps";
import React from "react";

export default function Home({ navigation }) {
  let location = {
    latitude: 23.259933,
    longitude: 77.412613,
    latitudeDelta: 0.009,
    longitudeDelta: 0.009,
  };

  return (
    <View style={styles.container}>
      <View style={styles.myMap}>
        {/* <MapView
          style={StyleSheet.absoluteFillObject}
          provider={PROVIDER_GOOGLE}
          mapType="hybrid"
          region={location}
        /> */}
        <MapView
          region={location}
          provider={null}
          mapType={MAP_TYPES.HYBRID}
          rotateEnabled={false}
          style={{ flex: 1 }}
          style={styles.map}
          showsUserLocation
        >
          {/* <UrlTile
            urlTemplate="http://a.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
            maximumZ={19}
          /> */}
          <Marker
            title="Home"
            coordinate={{
              latitude: location.latitude,
              longitude: location.longitude,
            }}
          />
        </MapView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffd",
    alignItems: "center",
    justifyContent: "center",
  },
  myMap: {
    flex: 2,
    backgroundColor: "white",
    width: "100%",
    marginTop: 30,
    marginBottom: 30,
  },
  map: {
    width: "100%",
    height: "100%",
  },

});

Answer 1

Open street map managed host is free and support only iOS with react-native-maps , It's not recommended for large scale app, when happen, you need to host map tiles on your own servers,

Google maps are cross-platform and performant but let's examine their pricing.

Google map bill client per request, in React Native context, when a user navigates to screen with a map inside, Map SDK query google server and render the map, this count as a single request.

Rendering markers or other UI elements have no impact on map requests and Google will not bill for that.

Zoom and pan are not counted as requests and will not impact your billing invoice.

Technically, you can be billed for a single server request and a user continues to use the map-based features.

If you're building an uber-like app with turn-to-turn navigation with continuous server requests, pricing will be huge.