2018/06/28 - otak-lab

iframeによる方法はこちらです。

2019.07.02

ちょうど１年ほど前に【Monaca】Onsen UIでGoogleマップを表示するという記事を書き、たくさんのアクセスをいただきました。Maps JavaScript APIを使った方法のため、APIキーの取得や有料化の問題など面倒な部分が多かったと思います。今回はiframeを使用して無料でGoogleマップを表示する方法を紹介します。まずはMonacaデバッガーの表示結果です。iOSの場合、画面操作中にiframeの領域が固定されず、多少操作に難があります。AndroidiOSOnsen UIの準備ができたら、iframeのwidthとheightをOnsen UIのコンテンツ領域(.page__content)...

Monacaで新規プロジェクト「Onsen UI V2 JS Minimum」を作成し、サンプルコードを貼り付けて実行したら、あっさり表示された。
Monacaデバッガーで動作確認済み。
※事前にMaps JavaScript APIのキーを取得すること。
※37行目のYOUR_API_KEYを取得したAPIキーに書き換えること。