monacaでgooglemapsのコントローラーを表示する

monacaでgooglemapsapi地図アプリを作っています。
(Maps JavaScript APIを利用）
リリース向けビルド、アドホックビルドをしたところ、
地図やストリートビューは表示され、問題なく機能するのですが、
googlemapのコントローラ（ズーム、ストリートビュー）が表示されません。
コントローラーは、デバッガーで実行する分には見ることができます。

また、地図上のgoogleロゴをタップすると、
アプリがgoogle mapへ移動するのですが、google mapから戻ることができません。

この現象はiOSのみに発生しています。

whiteリストとしては、config.xmlに以下の記載をしています。

<access origin="*://*.googleapis.com/*" subdomains="true"/>
<access origin="*://*.gstatic.com/*" subdomains="true"/>
<access origin="*://*.google.com/*" subdomains="true"/>
<access origin="*://*.ggpht.com/*" subdomains="true"/>
<access origin="*://*.googleusercontent.com/*" subdomains="true"/>
<allow-navigation href="*://*.google.com/*"/>
<allow-intent href="*://*.google.com/*"/>

<!DOCTYPE HTML>
<html ng-app="my-app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: ; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
 <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
</head>
<body ng-controller="bodyController as bodycnt">

    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script 
        src="https://maps.googleapis.com/maps/api/js?key=「ここはAPI-KEYを入れてます」&callback=initMap"
    async defer></script>
  
</body>

</html>

コントローラを表示するために、これとは別のホワイトリストが必要であると仮定しているのですが、
ご教授いただけないでしょうか？

oikashinoa

2018/08/21 10:21

他のソースも書かないとなかなかコメントつかないですよ。情報少なすぎます。

oikashinoa

2018/08/21 10:25

あと、何向けにビルドしたかですね。iOS？

wdysht

2018/08/23 21:41

ご指摘ありがとうございます。記載内容を追加いたしました。

oikashinoa

2018/08/23 23:53

iosだけで発生していた記事を見た覚えが有ります。急ぐのであればご自分で調べてみてください。

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

回答4件

同じ現象で悩まされています。

該当のCSSに

#map {
overflow:auto !important;
}

を設定すると、とりあえずズームボタンは表示されませんか？

ただし、地図の挙動が少し変になりますがズームの操作も可能になります。

投稿2023/07/06 03:07

ToruSugiyama

総合スコア12

下記の内容を書き加えることで、
ロゴをクリックすると、google mapへ移動することができました。
ただし、戻ることのできるボタン等がなく、元のアプリへ戻ることができません。

<allow-navigation href="*://*.google.com/*"/>
<allow-intent href="*://*.google.com/*"/>

投稿2018/08/24 22:45

wdysht

総合スコア13

MonacaでgoogleMap設定 (iOSビルド版)…古い内容でした。が、

MonacaApp-Info.plist | Monaca Docsに記載の通り今は

Cordova 6.2 以降をサポートする Monaca フレームワークでは、MonacaApp-Info.plist ファイルを使用しないように、仕様が変更されました。よって、iOS アプリの設定をカスタマイズする場合には、 Custom Config プラグインを使用する必要があります。

Custom Config プラグインでやるのが正解なのかも。

当方iPhone 持ってないので試すことは出来ないので頑張って下さい。

投稿2018/08/24 15:23

oikashinoa

総合スコア2826

wdysht

2018/08/24 22:53

ありがとうございます。上記の内容では解決しませんでした。 Custom Config プラグインというより、もう直にConfigファイルに書き込むことを行なっているのですが、その内容の資料が探せなくて質問させていただいた次第です。今年になって現れた現象なので、google maps apiのバージョンを落とすと良いのか？等（落とすことができるかどうかも含めて）思案しているのですが...

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

以前見つけたのとは違いますが、以下を試してみて下さい

http://www.tailtension.com/googlemapsapi/661/

家に帰ったらまた探してみます。

投稿2018/08/24 03:59

oikashinoa

総合スコア2826