機能的で格安なページ制作

スマホでGoogleMap等を操作ロックする

スマホ初期表示でマップをロックし解除ボタンをつける方法です

スマホサイト等でGoogleMapなどの操作を利用しやすくする方法です。

スマホ対応のサイトを作ってGoogleMapを埋め込んだ際に、スマホで開いてスワイプでスライドした際
どうしても、マップの部分で地図が勝手に移動してしまい操作がしづらいなんて事ありませんか?

それを、解決する方法を今回は組んでみました。

スマホの狭い画面で横幅いっぱいのGoogleMapの画面でスワイプしてしまうとどうしても地図面に指が触れて地図が動いてしまいますよね

そこで、スマホ画面の地図表示部分の上に透明または半透明のボックスで覆い初期画面では動かないようにしてみました。
当然、ロック解除をタップにて地図操作が可能になるようにjQueryで解除・ロックボタンを設置します。

その際のHTMLソースは次のようにします

次にロック解除ボタンのjQueryのソースです。

次にCSSです、ここが一番大事かも少し長いですが

となります。


No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スマートフォン

このサイトはレスポンシブルです、
画面幅によりレイアウト最適化します、
スマホサイズで見てみよう!

上のQRコードをスマホでスキャン
又はタップしてメールで送れます

 
 

財成神社






このブログパーツの貼り付けコードはこちら
無料ですので是非使ってください。

お勧めサーバー

Amazonでお買物