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

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

️2018/06/28

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マップを表示する方法を紹介します。

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

iOS

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

imakoko.didit.jp

Google Maps のパラメータ

~~http://imakoko.didit.jp/imakoko_html/memo/parameters_google.html~~

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    "use strict";
    var url = "https://maps.google.co.jp/maps";
    var param = {
        center: { lat: 35.6811673, lng: 139.7670516 },
        zoom: 12,
        lang: "ja"
      };
    ons.ready(function() {
      var content = document.querySelector(".page__content");
      var iframe = document.querySelector("iframe");
      iframe.style.width = content.clientWidth.toString() + "px";
      iframe.style.height = content.clientHeight.toString() + "px";
      if (ons.platform.isAndroid()) {
        iframe.setAttribute("scrolling", "yes");
      } else {
        iframe.setAttribute("scrolling", "no");
      }
      // パラメータ指定
      var p = "?output=embed"
            + "&ll=" + param.center.lat.toString() + "," + param.center.lng.toString()
            + "&z=" + param.zoom.toString()
            + "&hl=" + param.lang;
      iframe.setAttribute("src", url + p);
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }
  </script>
</head>
<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">Google Map Test2</div>
    </ons-toolbar>
    <iframe frameborder="0"></iframe>
  </ons-page>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

"use strict";

var url = "https://maps.google.co.jp/maps";

var param = {

center: { lat: 35.6811673, lng: 139.7670516 },

zoom: 12,

lang: "ja"

};

ons.ready(function() {

var content = document.querySelector(".page__content");

var iframe = document.querySelector("iframe");

iframe.style.width = content.clientWidth.toString() + "px";

iframe.style.height = content.clientHeight.toString() + "px";

if (ons.platform.isAndroid()) {

iframe.setAttribute("scrolling", "yes");

} else {

iframe.setAttribute("scrolling", "no");

}

// パラメータ指定

var p = "?output=embed"

+ "&ll=" + param.center.lat.toString() + "," + param.center.lng.toString()

+ "&z=" + param.zoom.toString()

+ "&hl=" + param.lang;

iframe.setAttribute("src", url + p);

});

if (ons.platform.isIPhoneX()) {

document.documentElement.setAttribute('onsflag-iphonex-portrait', '');

document.documentElement.setAttribute('onsflag-iphonex-landscape', '');

}

</script>

</head>

<body>

<ons-page>

<ons-toolbar>

<div class="center">Google Map Test2</div>

</ons-toolbar>

</ons-page>

</body>

</html>

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

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

【Cordova】Ver.8.1.2「cordova-plugin-crypt-file」ENOENT: no such file or directory, open ‘DecryptResource.java’ エラー回避方法その2

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

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

Recommended Posts

【Cordova】cordova-plugin-statusbarプラグインのStatusBarOverlaysWebViewが機能しない場合の対処方法

【Cordova】App Storeの審査が通りませんでした・・・

【Cordova】admob-plusプラグインにおいて広告が表示されない場合の対処方法

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