ちょうど1年ほど前に【Monaca】Onsen UIでGoogleマップを表示するという記事を書き、たくさんのアクセスをいただきました。

Maps JavaScript APIを使った方法のため、APIキーの取得や有料化の問題など面倒な部分が多かったと思います。
今回はiframeを使用して無料でGoogleマップを表示する方法を紹介します。

まずはMonacaデバッガーの表示結果です。
iOSの場合、画面操作中にiframeの領域が固定されず、多少操作に難があります。
Android

iOS

Onsen UIの準備ができたら、iframewidthheightをOnsen UIのコンテンツ領域(.page__content)と同じサイズに設定します。
scrolling属性は、Androidの場合はyes、iOSの場合はnoを指定します。
最後にsrc属性に、GoogleマップのURLとパラメータを設定します。
パラメータの詳細は、下記サイトを参照してください。

グーグルが消える日 Life after Google

新品価格
¥1,944から
(2019/7/2 23:00時点)

【Monaca】Onsen UIでGoogleマップを表示する その2
Tagged on: