Googleマップを埋め込んで、指定した検索に該当した場所をjsで取得したい

Question

グーグルマップを使って、付近のカフェを検索して
その結果を別の場所に書き出したいです。

<iframe class="w-100 bg-3" style="height:500px;"
    src="https://maps.google.co.jp/maps?output=embed&q=351-0005+カフェ&hl=ja">
</iframe>

このコードをhtmlに書いて表示すると、付近のカフェが表示されますが
DOMとして情報を持てていません（何故だ）

カフェのピンをクリックすると要素を取得できるようになるのですが、、、、

この解決方法、または他の方法をご教授いただければ幸いです。

Answer 1

DOMとして情報を持てていません（何故だ）

「同一オリジンポリシー」があり、iframe内から親フレームの内容、親フレームから子フレームの内容はアクセスできません。（iframe内のサーバ側に設定が出来るなら回避は出来るが、両方のオリジンの所有者で無い限り普通は無理）

【同一オリジンポリシー - ウェブセキュリティ | MDN】
https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy

---

カフェのピンをクリックすると要素を取得できるようになるのですが、、、、

iframe でなくGoogle Maps JavaScript API とGeocoding APIを使う必要があると思います。

【Developer Guide  |  Geocoding API  |  Google Developers】
https://developers.google.com/maps/documentation/geocoding/intro