iOSアプリのwebViewで、GoogleMapsEmbedAPIで生成された地図からGoogleMapアプリを開きたい

Question

前提

iOSアプリ上で開いたWebView上に表示されているGoogleMapsEmbedAPIで生成された地図をクリックしたとき、
端末にインストールされているGoogleMapアプリが立ち上がるようにしたい。

この地図は、GoogleMapsEmbedAPIで生成されており以下のスクショのように表示されています。

このとき、左上の拡大地図を表示ボタンをタップした場合、端末にインストールされているGoogleMapアプリが立ち上がる
（インストールされていない場合、Safariのアプリが立ち上がりGoogleMapが表示される。）
のですが、地図上（例えば東京駅の部分）をタップした場合、そのままWebView上でブラウザ版(?)のGoogleMapが表示されてしまいます。

地図上をタップした場合も、拡大地図を表示と同じ挙動にしたいのですが、方法が分からない状態です。

WebViewに表示されるWeb側は、React/Typescriptで作成しています。

実現したいこと

• 地図上をタップした場合も、拡大地図を表示と同じ挙動にしたい。

該当のソースコード

<iframe
  src={`https://www.google.com/,aps/embed/v1/place?key=API_KEY&q=0.000,0.000`}
/>

試したこと

• よくあるアプリを立ち上げる方法のURLスキーム(<a href="maps:q=0.000,0.000">Mapアプリで開く</a>みたいな)の書き方をすれば良いと思ったのですが、googleのAPIによって自動的に生成される部分であり、自分で書き換えられないと思っています。
• 試しに、デベロッパーツールから、Htmlを直接書き換えて、hrerfの内容をmaps:に書き換えてとりあえず挙動だけでも確認しようと思ったのですが、こちらもうまく行かず、WebView上でそのままGoogleMapが表示されてしまいました。

Comments

[hoshi-takanori]

WKNavigationDelegate の webView(_:decidePolicyFor:decisionHandler:) メソッドでリンクを乗っ取るとか…。
https://qiita.com/s_emoto/items/dc3d61626155f5cf83e7

[usukuti_hanako]

hoshi-takanorさん
情報ありがとうございます。

そちらのページを参考に、リクエストURLを検証して、GoogleMapのものだった場合、
maps:緯度経度 に置き換え、
```
UIApplication.shared.open(url)
decisionHandler(.cancel)
return
```
と処理するような方法など、色々試してなんとか解決しました。

（Swiftの文字列切り出しなどがチョット大変だったのは、また別のお話）

Answer 1

最終的に以下のように解決しました。

public func webView(_ webView: WKWebview, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    // リンク先のURLの文字列を取得
    guard let url = navigationAction.request.url, !url.isFileURL else {
        decisionHandler(.cancel)
        return
    }
    let urlString = url.absoluteString

    // ※１
    // 自ドメイン内の遷移以外の、Mainframeで処理するものは外部アプリなどで開く
    // = 外部のURLをwebView上で開こうとする場合
    // 例えば、各種URLスキーム(tel: など)、外部サイトへのリンク、GoogleMap内のタップや『拡大地図を表示』ボタン、などなど
    if !urlString.hasPrefix(myDomain) {
        if navigationAction.targetFrame == nil || navigationAction.targetFrame!.isMainFrame {
            UIApplication.shared.open(url)
            decisionHandler(.cancel)
            return
        }
    }

    // 上記以外は、内部で処理する
    // 自ドメイン内の遷移、GoogleMapを表示するiframeのsrcで呼ばれる、GoogleMapEmbedAPI、など
    decisionHandler(.allow)
    return

}

GoogleMapEmbedAPIのリクエストはwebView上で処理したく（画面の変化はない裏で走るため）、外部のアプリで処理して欲しくないもので、このリクエストが、
自ドメインでない、navigationAction.targetFrame!.isMainFrame = falseとなるため
※1の判定をするに至りました。

navigationAction.targetFrame!.isMainFrame
が、どんなときにどんな値になるのか、公式のリファレンスを見ても、Swiftの書籍を見ても、明確には確認できなかったため、実際にアプリを動かしてそれぞれ確認して今の判定となりました。
（この判定で不都合が出ればその時に改修する方針）

参考までに

• tel: スキーム
  • isMainFrame = true
• 外部リンク
  • isMainFrame = true
• GoogleMapの『拡大地図を表示』ボタンをクリック
  • そもそもnavigationAction.targetFrame がnil
• GoogleMapの地図上自体をクリック
  • isMainFrame = true

という実行結果でした。