iframeを用いて地図を埋め込んだ際に、一本指で操作する方法

iframeを用いて地図があるURLを表示させているのですが、
「地図を移動させるには指二本で操作します」
と表示されて地図が操作しにくい状況です。

通常のGoogle マップのように一本指で地図を操作させることはできますか？

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
6  <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'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    // Page init event
17    document.addEventListener('init', function(event) {
18      var page = event.target;
19
20      if (page.matches('#first-page')) {
21        page.querySelector('#push-button').onclick = function() {
22          document.querySelector('#navigator').pushPage('page2.html');
23        };
24      } else if (page.matches('#second-page')) {
25        page.querySelector('#pop-button').onclick = function() {
26          document.querySelector('#navigator').popPage();
27        };
28        page.querySelector('#test-button').onclick = function() {
29          document.querySelector('#navigator').pushPage('page3.html');
30        };
31      } else if (page.matches('#third-page')) {
32        var toolbar = page.querySelector(".toolbar");
33        var width = page.clientWidth.toString() + "px";
34        var height = (page.clientHeight - toolbar.clientHeight).toString() + "px";
35        console.log("iframe size = " + width + " x " + height);
36        var iframe = page.querySelector("iframe");
37        iframe.style.width = width;
38        iframe.style.height = height;
39      }
40    });
41
42    if (ons.platform.isIPhoneX()) {
43      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
44      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
45    }
46  </script>
47</head>
48<body>
49  <ons-navigator id="navigator" page="page1.html"></ons-navigator>
50
51  <ons-template id="page1.html">
52    <ons-page id="first-page">
53      <ons-toolbar>
54        <div class="center">Page 1</div>
55      </ons-toolbar>
56
57      <div class="content" style="text-align: center">
58        <p>This is the first page.</p>
59        <ons-button id="push-button">Push page</ons-button>
60      </div>
61    </ons-page>
62  </ons-template>
63
64  <ons-template id="page2.html">
65    <ons-page id="second-page">
66      <ons-toolbar>
67        <div class="left"><ons-back-button>Page 1</ons-back-button></div>
68        <div class="center">Page 2</div>
69      </ons-toolbar>
70
71      <div class="content" style="text-align: center">
72        <p>This is the second page.</p>
73        <ons-button id="pop-button">Pop page</ons-button>
74        <ons-button id="test-button">テスト</ons-button>
75      </div>
76    </ons-page>
77  </ons-template>
78
79  <ons-template id="page3.html">
80    <ons-page id="third-page">
81      <ons-toolbar>
82        <div class="left"><ons-back-button>Page 2</ons-back-button></div>
83        <div class="center">Page 3</div>
84      </ons-toolbar>
85      <!-- <iframe frameborder="0" src="https://www.google.co.jp/maps/?hl=ja" scrolling="yes"></iframe> -->
86      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12961.65689391724!2d139.69029879890132!3d35.6914230310646!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1579437807146!5m2!1sja!2sjp"  frameborder="0" style="border:0;" allowfullscreen=""></iframe>
87    </ons-page>
88  </ons-template>
89</body>
90</html>

oikashinoa

2020/01/20 07:44

monacaの質問はcordovaタグを付けると良いですよ。

行動規範の内容に同意します

回答2件

ベストアンサー

GoogleMapの仕様だと思います。
全面がMapのGoogleMapと違ってサイトに埋め込まれる場合、多くは縦スクロールなりスワイプなりが発生しますから。
その辺の操作を奪うことになるとサイト操作が満足に出来なくなる・・・
ということでの仕様になっているようです。
（正確には途中から「なった」）

検索してみると「よくなった」という人、「使いづらい」という人
賛否両論みたいですね。
私は２本で割と良くなったと思ってます。

投稿2020/01/19 13:25