スマホのUI向上!?ニョローっとGoogle Mapsを広げるJavascriptを作ってみたよ！ 2014.07.27(Sun) 18:30 WEB制作 PC、スマホで表示を分けるブログ(ホームページ)を作っている時に悩みの種になるのがGoogle Mapsの埋め込み地図。スマホで大きく表示させるとスクロールしにくくなるし、小さく表示させると地図が見えにくくなる…。けっこう厄介なんですよね。 「結局、直接Google Maps見た方が早いや」というように、何かと形骸化しがちなページ内の埋め込み地図。少しでも実用的になったらなーと思い、ニョローッと表示範囲を広げることができるボタンを追加してみたので紹介します。 1ボタンをクリック(タッチ)すると地図が広がりますということで、サンプルはこんな感じです。地図の下にあるボタンをクリック(タッチ)すると、埋め込み地図が下にニョローっと広がります。

ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。