Googleマップはそれを真にした後でもドラグ/ドラッグできません

Question

Googleマップはそれを真にした後でもドラグ/ドラッグできません。

再生する手順：新しいタブで地図を読み込み、何もせずに検査してモバイルビューに移動します。モバイルビューのドラッグマップを左から右にドラッグすると、機能しません。

コードスニペットを実行してください。

 var map; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: -34.397, lng: 150.644}, 
 
      zoom: 8, 
 
      draggable: true 
 
     }); 
 
     }

#map { 
 
     height: 90%; 
 
     } 
 
     html, body { 
 
     height: 90%; 
 
     margin: 0; 
 
     padding: 0; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCk0vq10rCc-wxeYQb-E5IoB-E3WBtIMxA&callback=initMap" 
 
    async defer></script> 
 
<div id="map" data-role="page"></div>https://stackoverflow.com/questions/ask#

Answer 1

あなたは、実際のモバイルデバイス上でロードしようとしたか、単にWebブラウザ経由で応答ビューを使用したことがありますか？私はあなたのコードをJSBinに入れて、クローム開発ツールを使って説明した問題を再現することができました。しかし、JSBinをモバイルデバイスにロードしてドラッグしようとすると、ドラッグするために2本の指を使用するというメッセージが表示されました。これはジェスチャーの処理と関係があります。これについては次の段落で説明します。

Google Maps JavaScript APIはMapOptionsオブジェクトにジェスチャー処理オプションを提供しています。このオプションを使用して、マップとやり取りする際のユーザーエクスペリエンスを最適化できます。私はあなたが使用したい設定は、このマップは、指一本でドラッグすることを可能にする、貪欲であると信じて、あなたはこれを行うことができます。

var map; 

    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8, 
     gestureHandling: 'greedy', 
     draggable: true 
    }); 
    } 

これは、マップは、1本の指の代わりに、2でドラッグできるようになります。詳しくはこちらの記事を参照してください：言及する価値

https://developers.google.com/maps/documentation/javascript/interaction#gesture-handling

ことの一つは、あなたがモバイル/応答ビューに行くために選択した後にページをリロードする必要があるということです。ページをリロードしないと、タッチ機能を正しく使用できなくなります。これは地図をドラッグできないかのように見えます。ページをリロードすると、これは起こりません。私は、モバイルデバイスとWebブラウザーを使ってレスポンシブなビューの両方を試してみることをお勧めします。あなたが生きてそれを見ることができるので、ここでJSBinがある：私はJSBinからそれを取ったあなたの鍵のプライベートを保つために

http://jsbin.com/tuvobipozi/1/edit?html,css,js,output

を、スクリプトタグを交換してください：

MY_API_KEYの交換

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap" 
async defer></script> 

あなたのAPIキーでこれで、その機能を見ることができます。レスポンシブ/モバイルビューを選択したら、[JSで実行]ボタンを選択してページをリロードしてください。これで、タッチ機能を使用してマップをドラッグすることができます。

こちらがお役に立てば幸いです。