タグ: javascript

Google Maps APIメモ(v2) #2 簡単コントローラーの追加

シリーズ第2弾

コントローラーの追加

地図へコントローラー追加

  • 地図へ小さいコントローラー追加
  • ダブルクリックでズーム
  • スクロールホイールでもズーム
function initialize(){
    if(GBrowserIsCompatible()){
        var map = new GMap2(document.getElementById("gMap"));
        map.addControl(new GSmallMapControl());
        map.enableDoubleClickZoom();
        map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(37.4419,-122.1419),13);
    }
}

サンプル

関連エントリー

Google Maps APIメモ(v2) #1 超基本

忘れまくってるのでメモ

超基本

head内にスクリプトを読み込む

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=上で取得したAPIキー"
    type="text/javascript"></script>
<script src="path-to-file/map.js" type="text/javascript"></script>

map.jsの中身

function initialize() {
    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas_id"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    }
}

bodyタグ

<body onload="initialize()" onunload="GUnload()">

HTMLの中身

<div id="map_canvas"></div>

という空のdivを用意する。幅と高さは指定してやる。
サンプル

関連エントリー

jQueryを使った画像のロールオーバー

まさに車輪の(以下略)なんですが、

  • jQuery使う事最近多い
  • jquery_auto.js(リンク先なくなってる!)やyuga.jsを使うまでもない時もある

という事でなんとなしに書こうと思った。

こうだったらいいなと思ったこと

  • シンプル
  • 拡張子の文字数にかかわらずに動く
  • input type="image"でも動く

コード

/**
 * rollOver on jQuery
 * rollOver tag:img,input
 * rollOver class:Over
 * rollOver FileName:*_o.*
 * Last modify:20081210
 * Licensed:MIT License
 * @author AkiraNISHIJIMA(http://nishiaki.probo.jp/)
 */

function rollOver(){
    var preLoad = new Object();
    $('img.Over,input.Over').not("[@src*='_o.']").each(function(){
        var imgSrc = this.src;
        var fType = imgSrc.substring(imgSrc.lastIndexOf('.'));
        var imgName = imgSrc.substr(0, imgSrc.lastIndexOf('.'));
        var imgOver = imgName + '_o' + fType;
        preLoad[this.src] = new Image();
        preLoad[this.src].src = imgOver;
        $(this).hover(
            function (){
                this.src = imgOver;
            },
            function (){
                this.src = imgSrc;
            }
        );
    });
}
$(document).ready(rollOver);

使い方

  • 上記のスクリプトファイルを読み込ませる
    例)
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="path/hoge.js"></script>
    
  • ロールオーバー画像名は、ロールオーバー前の画像に”_o”を付けたモノを用意する
    例)
    【fuga.png】→【fuga_o.png】
    
  • ロールオーバーするimgタグもしくはinputタグにclass="Over"を付ける
    例)
    <img src="fuga.png" alt="" />
    ↓
    <img src="fuga_o.png" class="Over" alt="" />
    

_oの画像にclass="Over"としててもチラチラになることはありません。
わかる人には、わかると思います。
ライセンス表記なくて、使用する時に迷ったりすることがよくあるので、
「自由に使ってくださいな」という気持ちで、コメント書いてます。
いつもは、こんなコメント書かないから、書き方正しいかどうかもわかりませんw
ここ間違っとるぞ!とかこここうやったらもっとスマートやぞ!とかあったらよろしく。
2010年1月10日追記:匿名さんのご指摘通り、jQueryの以前のバージョン用で書いてましたので、not部分の@は必要ありません。

そろそろみんなでGoogle AJAX Libraries API使いませんか?

そろそろみんなでGoogle AJAX Libraries API使いませんか?

AJAX Libraries API – Google Codeの存在は知ってたんだけど、
仕事で使った事は今まではなかったんだけど、そろそろ場面に応じて使ってもいいんじゃないかなって思った。
というのは、やっぱり最近のサイト制作する上でリソースが気になってます。
みんなで、Google AJAX Libraries API使えば、どこかのサイトで読み込んでキャッシュが効いて、リソースうま〜。
とかになるんじゃないかと。それもGoogle AJAX Libraries APIのメリットのひとつですよね。
特にWebサービスとかであれば、サーバーの負荷とかもかなり違ってくるのでは?とかも思いますし。
Ajax Librariesは、今のとこ下記みたいな内容

  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us
  • MooTools
  • Dojo
  • SWFObject
  • Yahoo! User Interface Library (YUI)

YUIも使えるようになったのがなんか新鮮な感じ。

ダウンロードされるファイルも労せず最小化されたものになるみたいですし

  • Google CDNを活用したファイルの配布
  • 対応していればGzip圧縮転送を有効にする
  • ダウンロードするファイルは可能なかぎり最小化されたものとなる
  • キャッシュが有効になるように工夫されており、一度どこかでダウンロードしてあればキャッシュが使えるため不要なダウンロードしなくなる
  • バージョン番号にワイルドカードが指定できるため自動的にマイナーアップデートを実施できる

Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果 | エンタープライズ | マイコミジャーナルより引用

実際の使い方

  • google.load()で読み込む

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.2.6");</script>
    
  • バージョンは、省略すると最新バージョンが読み込まれる
    1.2→1.2.xの最新バージョン
    1→1.x.xの最新バージョン

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.2");</script>
    
  • バージョン指定して直接読み込みも可能

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    

れぶろぐ – [Google] AJAX Libraries API はバージョンをフル指定した方が高速に動作する
という記事もあるし、プラグインとかによっては、バージョンで動かなくなるモノも存在するだろうから、バージョン指定した方が良さそうですね。