Blog

googlemapをブラウザの横幅一杯に表示するとカッコイイかも

2013.09.04Cat:javascript デザイナー

googleMapのapiを利用して、地図を表示することは多いと思います。
弊社でもアクセス情報を載せる時は、かなりの確率で利用させてもらっています。
(最近では、apiではなく、googlemapの埋め込み用コードを使うことも多いですが・・・)

ふと、このmapを横幅一杯に表示されたらなんかかっこいいんじゃないかと思って、
試してみました。

DEMO

なんかデザイン次第じゃかっこ良くなるんじゃあないでしょうか??

ただ、横幅一杯にした場合、地図をスクロールやマウスのホイールで動くようにしてしまうと
若干めんどくさいですね。。。

DEMOでは動かないようにしています。

方法は、ただcssでwidthを100%に設定するだけで、
googlemapの設定は通常の設定でOKです。

一応、googlemapのソースを載せておきます。

ちなみに、アイコンを違うものに設定したい場合、
下記サイトをご覧ください。いろんなアイコンが用意してあります。

アイコン一覧表

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ