I have been trying to implement Google Maps in a React Native application for a client which will use a lot of map accesses daily. Have been a little lost in regards to pricing, however.

Searching about the topic, came across this question: React Native Maps Google pricing

Read this documentation for its pricing and use, then: https://developers.google.com/maps/documentation/android-sdk/usage-and-billing?hl=pt-br#dynamic-maps

Still, I am a little lost; My map does use custom styling, and the documentation refers to needing to use a “custom ID” when custom styling; I wont use any other functionality but the static map, however, which suggests it should remain free.

Here is the code for the Map as of now.

import { StyleSheet, Text, View, Dimensions, Platform, TouchableOpacity, Image, } from "react-native";
import React, { useEffect, useState, useContext } from "react";
import MapView, { Marker, Callout, PROVIDER_DEFAULT, PROVIDER_GOOGLE } from "react-native-maps";
import * as Location from 'expo-location'

import { AuthContext } from "../context/user.js";

import { useNavigation } from '@react-navigation/native';

const user = require("../../assets/UserWhite.png")
const marker = require("../../assets/marker.png")

const mapStyle = [
    {
        featureType: "administrative",
        elementType: "labels.text.fill",
        stylers: [{ visibility: "off" }],
    },
    {
        featureType: "poi",
        elementType: "labels.text.fill",
        stylers: [{ visibility: "off" }],
    },
    {
        featureType: "poi.park",
        elementType: "geometry.fill",
        stylers: [{ visibility: "off" }],
    },
    {
        featureType: "road",
        elementType: "geometry.fill",
        stylers: [{ color: "#FFFFFF" }],
    },
    {
        featureType: "road",
        elementType: "geometry.stroke",
        stylers: [{ color: "#FFFFFF" }],
    },
    {
        featureType: "water",
        elementType: "geometry.fill",
        stylers: [{ color: "blue" }],
    },
];


return (
        // <View style={styles.container}>
        <View>

            {(myLocation) &&
                <MapView
                    style={{ width: "100%", height: "100%" }}
                    // style = {styles.map}
                    initialRegion={
                        {
                            latitude: myLocation.latitude,
                            longitude: myLocation.longitude,
                            latitudeDelta: 0.0922,
                            longitudeDelta: 0.0421
                        }
                    }
                    provider={Platform.OS === 'android' ? "google" : PROVIDER_DEFAULT}
                    customMapStyle={mapStyle}
                >

                    {pin.latitude && pin.longitude &&
                        <Marker
                            coordinate={pin}
                            title="Localização atual"
                            image={require("../../assets/markerUser.png")}
                        />
                    }

                    {eventos && eventos.map(evento => (
                        <Marker
                            key={evento.id}
                            coordinate={{
                                latitude: parseFloat(evento.latitude),
                                longitude: parseFloat(evento.longitude)
                            }}
                            title={evento.titulo}
                            description={evento.localizacao}
                            image={marker}
                        />
                    ))}
                   

                </MapView>
            }
       </View>

let deviceWidth = Dimensions.get("window").width
let deviceHeight = Dimensions.get("window").height

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    map: {
        width: deviceWidth,
        height: deviceHeight / 1.2,
    },
    userCircle: {
        position: "absolute",
        justifyContent: "center",
        alignItems: "center",
        left: deviceWidth / 1.25,
        top: deviceHeight / 15,
        width: deviceWidth / 8,
        height: deviceWidth / 8,
        borderRadius: 50,
        backgroundColor: "#E3E3E3"
    },
    img: {
        aspectRatio: 1,
        // height: deviceHeight / 25,
        width: "100%", height: "100%", borderRadius: deviceWidth
        // tintColor: "#F3722C"
    }
})

I need some clarification in regards to this concept of “Map ID”. Would I need one for the following code? What about if I wanted to use it in iOS? Also, where should I even use this API key?