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

概要

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

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

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

調査

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

 

<WebView

  injectedJavaScript={`

    (function() {

      console.error = function(...args) {

        window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'error', data: args }));

      };

      console.warn = function(...args) {

        window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'warn', data: args }));

      };

    })();

  `}

  onMessage={(event) => {

    const message = JSON.parse(event.nativeEvent.data);

    if (message.type === 'error') {

      console.error('Error:', ...message.data);

    } else if (message.type === 'warn') {

      console.warn('Warn:', ...message.data);

    }

  }}

/>

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

Google Maps JavaScript API error: InvalidKeyMapError

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

InvalidKeyMapErrorの調査

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

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

…

記事の続きは下のURLをクリック！

https://rightcode.co.jp/blogs/51459

エンジニア積極採用中です！

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら：https://rightcode.co.jp/blogs?category=life

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。