スマホサイト等でGoogleMapなどの操作を利用しやすくする方法です。
スマホ対応のサイトを作ってGoogleMapを埋め込んだ際に、スマホで開いてスワイプでスライドした際
どうしても、マップの部分で地図が勝手に移動してしまい操作がしづらいなんて事ありませんか？
それを、解決する方法を今回は組んでみました。
スマホの狭い画面で横幅いっぱいのGoogleMapの画面でスワイプしてしまうとどうしても地図面に指が触れて地図が動いてしまいますよね
そこで、スマホ画面の地図表示部分の上に透明または半透明のボックスで覆い初期画面では動かないようにしてみました。
当然、ロック解除をタップにて地図操作が可能になるようにjQueryで解除・ロックボタンを設置します。
その際のHTMLソースは次のようにします
|
1 2 3 4 5 6 7 8 |
<div class="map-w"> <div class="maplock"><span>地図操作ロック中</span></div> //** ここにマップ埋め込みのソースを入れる **// </div> <div class="lock-off">地図操作のロック解除</div> <div class="lock-on">地図操作をロックする</div> |
次にロック解除ボタンのjQueryのソースです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> jQuery(function( $ ) { // この行はワードプレス用 $(function(){ $(".lock-off").click(function(){ $('.maplock').css('display','none'); $('.lock-off').css('display','none'); $('.lock-on').css('display','block'); }); $(".lock-on").click(function(){ $('.maplock').css('display','block'); $('.lock-off').css('display','block'); $('.lock-on').css('display','none'); }); }); }); // この行はワードプレス用 </script> |
次にCSSです、ここが一番大事かも少し長いですが
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<style type='text/css'> .map-w{ margin:0; position:relative; display:block; height:450px; /*マップの高さに合わせます*/ } .maplock{ position:absolute; text-align: center; top:0; left:0; z-index:100; display:block; width:100%; height:100%; background:rgba(255,255,255,0.0); /*ロック時に全体に白くする場合は最後を 0.3)等に変えます*/ } /*ロック中が一目で解るように表示させる部分です*/ .maplock span{ position:absolute; top:380px; left:0; width:100%; display:block; color: #aaa; font-size: 30px; font-weight: bold; padding: 20px ; background:rgba(255,255,255,0.6); } /*ロック切り替えボタン部分*/ .lock-off{ color: #ff0000; } .lock-on{ color: #0000ff; } .lock-off , .lock-on{ width: 200px; text-align: center; margin: 20px auto; padding:5px 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 2px 2px 3px 1px #666; -webkit-box-shadow: 2px 2px 3px 1px #666; box-shadow: 2px 2px 3px 1px #666; background:#ddd; cursor: pointer; } /*以下はスマホサイズで開いた時に動作するようにします*/ .lock-off , .lock-on , .maplock { display:none; } @media (max-width:768px) { .maplock{ display:block; } .lock-off { display:block; } } </style> |
となります。
