Google Map - otak-lab

【Monaca】Onsen UIでGoogleマップを切り替える

前回の【Monaca】Onsen UIでGoogleマップを表示するその２のコードを流用して、Googleマップを切り替える方法を紹介します。

otak-lab

2019.07.02

【Monaca】Onsen UIでGoogleマップを表示するその２

https://otak-lab.com/archives/2182

ちょうど１年ほど前に【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でGoogleマップを表示するその２

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

otak-lab

2018.06.28

【Monaca】Onsen UIでGoogleマップを表示する

https://otak-lab.com/archives/1452

iframeによる方法はこちらです。Monacaで新規プロジェクト「Onsen UI V2 JS Minimum」を作成し、サンプルコードを貼り付けて実行したら、あっさり表示された。Monacaデバッガーで動作確認済み。※事前にMaps JavaScript APIのキーを取得すること。※37行目のYOUR_API_KEYを取得したAPIキーに書き換えること。 <!DOCTYPE HTML><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"...

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

Cordova Google Map iframe Monaca Onsen UI

【Monaca】Onsen UIでGoogleマップを表示する

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

otak-lab

2019.07.02

【Monaca】Onsen UIでGoogleマップを表示するその２

https://otak-lab.com/archives/2182

ちょうど１年ほど前に【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キーに書き換えること。