今回はReactNativeのWebViewで表示した時だけGoogleMapがエラー表示になってしまい、
InvalidKeyMapErrorなのにAPIキーは間違っていないという問題に遭遇した話です。

概要

軽く確認したところ以下のような感じです。（何もしてないのに壊れた

• iOS・Androidのどちらでも発生し、実機・シミュレータ関係なく発生する
• ブラウザで該当ページを開いてもエラーにはならない
• Staging環境のみで発生、ローカルや本番環境では発生しない
• エラーが発生する前にReactNativeアプリ側も、GoogleMapを表示する該当ページ側も変更を入れていない

幸い本番には問題が発生していなかったのですが、テストなどに影響が出ている状態でした。

調査

とりあえずは該当ページで何が起きているのかを確認するため、WebViewにログを仕込みます。

1 
2<WebView
3  injectedJavaScript={`
4    (function() {
5      console.error = function(...args) {
6        window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'error', data: args }));
7      };
8      console.warn = function(...args) {
9        window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'warn', data: args }));
10      };
11    })();
12  `}
13  onMessage={(event) => {
14    const message = JSON.parse(event.nativeEvent.data);
15    if (message.type === 'error') {
16      console.error('Error:', ...message.data);
17    } else if (message.type === 'warn') {
18      console.warn('Warn:', ...message.data);
19    }
20  }}
21/>

そうしたところ以下のログを取得できました。

Google Maps JavaScript API error: InvalidKeyMapError

エラーメッセージには公式ドキュメントへのリンクも含まれていて、
確認したところAPIキーが正しくないというエラーのようでした。（そのまんまですね

InvalidKeyMapErrorの調査

問題としてはGoogleMapを表示しているページ側にありそうなので、
APIキー周りを調査してみたのですが、
環境変数で入れているところを直書きにしても同じエラーが出続け、
APIキー自体を新規作成しアプリケーション制限などを全て撤廃しても同様のエラーが出ます。

そもそもブラウザではStaging環境でも正常に表示できているので、
ReactNativeアプリ側に問題がありそうです。

結論

原因はReactNativeアプリ側のWebViewで指定している
injectedJavaScriptBeforeContentLoadedにありました。

1 
2const headers = `XMLHttpRequest.prototype.open = (function(open) {
3  return function(method,url,async) {
4    open.apply(this,arguments);
5    this.setRequestHeader('Authorization', '${headers.Authorization}');
6  };
7})(XMLHttpRequest.prototype.open);`;
8
9<WebView
10  injectedJavaScriptBeforeContentLoaded={
11    environment.isStaging()
12      ? headers
13      : ''
14  }
15/>

特定ページでAjaxを利用しているのですが、
これに対してWebView側ではBasic認証をしてくれないようなので、
すべての Ajaxリクエスト（XMLHttpRequest を使用するリクエスト）に Basic 認証のヘッダーを付与しています。

GoogleMapを表示しているページを対象から外したところ、正常に表示されるようになりました！

なぜ発生したのか？

これまでは発生していなかったこととアプリに変更がない状態で突然エラーになったことから、
利用しているMaps javaScript API側で何か変更があったものと思われます。

公式ページを開くと以下のように2025年3月に更新があるという告知があるので、
ちょうど切り替わったタイミングで通信方法も変えたのかもしれません。