【googleガジェット】自分のサイトのアクセスのページとかに自宅からの交通費とかを簡単に調べられるやつを設置　2/2～具体的なhowto～

これの続きです。

で、具体的な方法。



説明したgoogleガジェットに、googleの代表的なサービスにgooglemapsももちろんあります。

ガジェットでは無いですが、あらゆるサイト、特に店舗などのサイトにはアクセスマップとしてgooglemapsを使っているサイトが非常に多く見られます。

これは、地図をグラフィックソフトで作成するのがめんどくさいので気軽にサイト内に設置できるのと、最近ではスマホで閲覧する割合も多いのも背景と言えます。



例えばスマホで、近くの美味しいパスタやさんを調べてるとします。（なんかおしゃれなリア充っぽくて癪にさわりますが(# ﾟДﾟ)）

で、そうすると美味しそうな店を発見して、「良し行こう！」となり、どこにあるんだろう、とアクセスページを開きます。




そんな時、そのサイト作成者が良かれと思って、グラフィックソフトで綺麗に書かれた地図が乗っていた場合、その地図を見ながら、えっちらほっちら探しながら行きます。

でも、そこにgoogleMapsがあれば、それをすぐにそれをスマホでクリックするとgoogleMapsアプリが起動し、そしてナビアプリが連携されていて、すぐに経路案内がされます。




どっちがそのお店に行ってくれる確率が高いかは考えるまでもありませんね？




とまあ、それは良いとして、更に。。。

遠くても行きたくなるようなお店

だったりするとき、行きたいのはやまやまだけど

どれくらいの時間がかかるんだろう？

電車賃はうちからどれくらいなんだろう？

って切実な問題が。。。


そんな時に、アクセスページ内にそれらがすぐ調べられるようになっていたら便利だね！

という話で、それにgoogleガジェットのgooglemaps道案内を使うと簡単にサイト内に設置出来ますよ、という話です。



まずは、自分のサイトにガジェット追加「googlemaps道案内」にアクセスして、それぞれ項目を入れていきます。

目的地のところに、自分の会社や店舗の住所を入れて、下の「コードを取得」をクリックすると、下にコードが出てくるので、それを貼りたい場所にコピペするだけです。

実際に貼り付けたのがこちら


適当に自分の家の住所や最寄り駅とかを入れてみてください。

グイーンと伸びて、マップや経路が出ます。なんかかっこよくない？

基本的に車での移動がデフォルトで出ますが、「電車・飛行機を使う」ってリンクが出るので、それをクリックすると電車賃も調べられたりします。




デザイン的に外枠が要らないときは、出力されたコードの

<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig...
(中略)
...country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

最後の方の

border=%23ffffff%7C3px%2C1px+solid+%23999999&

って部分が枠になるのでそこを削除すると


ね？なくなったでしょ？


というわけでよろしければやってみてね。