WordPressにGoogle Maps API V3！

◆Google Maps JavaScript API V3　ローディング中であることを表示するGIF画像

グーグルマップを読み込むまでのわずかの間だが、データを読み込み中であることを知らせたい。 文字で、loading・・・・・なんて、HTMLの書いたりしますよね。ちょいとお遊びでかっこいいGIF画像にしてみては。かっこいいGIFがあったので、あそんでみた。 いままでは、

<div id=”map_canvas” >Loading…</div>

◆ローディング中であることを表示するGIF画像サンプル

サンプルは、イメージ画像をいれただけ。

簡単な方法としては、地図を表示する<div id=”map_canvas”></div>タグの背景（background）として、スタイルシート（CSS）に下記のように記述すればOKです。

#map_canvas {
width:100%;
background-image:url(http://waox.main.jp/maps/gif/loading/ajax-loader.gif);
background-repeat:no-repeat;
background-position: center center;

実際には、下記のようなイメージになります。

◆参照サイト

ローディング中のGIF画像は、次のサイトで無料配布していたもの。色とかも変えられます。

その他にもローディング中のGIF画像を作成できるサイトがありましたので、追加で紹介です。一風変わったローディングGIF画像を紹介しているサイトもありました。

• http://www.chimply.com/
• http://ajaxload.info/
• http://www.preloaders.net/

スポンサードリンク