Q&A
問題点だけではなく、"最終的にどういう動きをしてほしいか"ということも記載したほうが、適切な回答が得られるかと思います。
PCのマウスのホイールで画面を上下にずらすと、
googlemap上でズームになってしまい、ページが動かなくなってしまいます。
調べたところ
scroll_wheel: false, //スクロール操作の無効化
でホイールの操作を無効か出来るようですが、変わりません。
ドラッグは止まったのですがホイールは止められないのでしょうか？
下記のようにソースはなっています。スマホでは、動かないようになりました。
PCのみ動いてしまいます。
//マップが動かないように固定する scale_control: true, //縮尺コントーラーを有効化 scroll_wheel: false, //スクロール操作の無効化 draggable: false, //ドラッグ操作の無効化 //end マップが動かないように固定する
具体的に行いたい最終形態は、
マップをwidth:100%;にしているので、上からスクロールしていくと、
マップの上にポインタが移動したときにスクロールが止まって、マップがどんどんアップになっていくことを止めて、スクロールし続けるようにしたいと思っています。
右側のスライドバーにポインタを移動しないとスクロールできないようでは著しくユーザービリティーが損なわれるので、解決したいです。
回答2件
0
ベストアンサー
pointer-eventsは、HTML上でid="map"となっている要素に対してstyle指定してやるものです。Javascript側でやるものではありません。ですので、mapOptionsに書くのではなく、以下のようなコードをHTMLのheadタグ内に追記してみてください。mapOptionsに追加したpointer-eventsは削除してください。
HTML
1<head> 2<!--titleとかの後--> 3<style type="text/css"> 4#map { 5pointer-events:none; 6} 7</style> 8</head>
投稿2016/06/06 05:12
総合スコア9210
できました。ありがとうございました。
ちなみにdivでつくっているばあいは埋め込みではないということでよろしいでしょうか？
iframeが埋め込みでしょうか？
つまり埋め込みとは他のサイトの一部をiframeで自分のサイトに埋め込むという認識でよいでしょうか？
ユーチューブの動画もそうですかね
すみません、厳密な意味で「埋め込み」という言葉を使ったわけではなかったのですが、混乱を招いたようです…
仰るとおり、こういったコンテンツを埋め込む方法は主にiframeが使われています。私のいう「埋め込み型」というのは、各サイトで発行できるHTMLタグを貼り付けるだけで、ページ上にコンテンツを表示できるものを指しています。YouTubeの動画や、TwitterやFacebookのTL表示も埋め込み型のものがありますね。ちなみに勝手に他人のサイトをそのままiframeで埋め込むと怒られるので、ちゃんとサイトで発行されるものだけを埋め込みましょう。
GoogleMapをHTML上に表示するには2通りありまして、このリンク先(https://support.google.com/maps/answer/144361?co=GENIE.Platform%3DDesktop&hl=ja)の説明のように、シンプルにGoogleMap上で埋め込みリンクを取得して貼り付けるだけの埋め込み型と、JavaScriptを使ってGoogleMapAPIを呼び出して地図を描画するAPI型とがあります。今回の対応はHTML側で対処する方法だったので、埋め込み型ならJavascriptでどうこうしなくてもいいよと言いたくて前置きとして言わせてもらいました。別にAPI型でも、最終的にはHTML上に表示されているので、どちらでも問題なかったです。
ありがとうございました。
すると今回の私の場合はJSを使っているので、埋め込み型ではないAPI型ということですね。
0
埋め込み型のものを使っているなら、
GoogleMapを表示している要素のタグに以下のstyleを追加してみてください。
CSS
1pointer-events:none;
ただしこれを使うとマウス操作を一切受け付けなくなるので、＋や－等のズームボタンすら動かなくなります。
投稿2016/06/06 04:30
総合スコア9210
お返事ありがとうございます。
埋め込みとはiframeを使った場合ということでよろしいでしょうか？
私はdivとJSを使って実装しています。
初心者なので、お教えいただければ幸いです。
下記のようなソースです。場所だけは数値を変えています。
教えていただいた、ように追加しましたが、地図が出なくなりました。
function init( )
{
var mapOptions = {
//マップが動かないように固定する
scale_control: true, //縮尺コントーラーを有効化
scroll_wheel: false, //スクロール操作の無効化
draggable: false, //ドラッグ操作の無効化
pointer-events:none,
//end マップが動かないように固定する
// ズームレベル
// 数字が小さいほど広域、数字が大きいほど詳細な地図になる
// 最小値は0、最大値は未定義
zoom: 17,
// 地図の種類
// ROADMAP: 市街地地図
// SATELLITE: 航空写真
// HYBRID: 航空写真 + 都市名等
// TERRAIN: 地形の特徴と植物の分布
mapTypeId: google.maps.MapTypeId.ROADMAP,
// マップ中心の緯度と経度
// 緯度経度取得：http://www.geocoding.jp/
center: new google.maps.LatLng( 3, 1 )
};
// Mapクラスのインスタンスを作成
var map = new google.maps.Map( document.getElementById( 'map' ), mapOptions ) ;
var marker =getMarker(
{
position: new google.maps.LatLng( 33, 130 ),
//ポインターを選択時に下記タイトルが表記される
title: "MyCompany",
icon: "./img/index/marker.png",
map: map
}
);
}
あなたの回答
tips
プレビュー
