Ajaxで今よみがえる(^^;;-->[クロスブラウザ技術 ]DHTMLサンプル集
古籏一浩さんとのはじめての共著 発売中-->『Ajax実践テクニック』 古籏一浩/高橋 登史朗 (著)秀和システム
配本予約開始-->『入門Ajax 増補改訂版 』 高橋 登史朗 (著)ソフトバンククリエイティブ ; ISBN: 4797336242
-- リスト --
【カテゴリー】 ActionScript ( 4 ) AIR ( 1 ) AjaSQL ( 10 ) Ajax ( 546 ) Arax ( 1 ) canvas ( 10 ) CSS ( 10 ) DLNA ( 1 ) Dojo ( 16 ) DOM ( 45 ) ES4 ( 4 ) 反重力物質 ( 1 ) ffAdd-on ( 1 ) Flash ( 45 ) Flash Remoting ( 11 ) FTP ( 2 ) GAF ( 9 ) Google Maps ( 108 ) GPS ( 40 ) HTTPヘッダサンプル ( 9 ) IPv6 ( 1 ) 漫画 ( 1 ) Java ( 44 ) JavaScript ( 236 ) jKamo ( 8 ) jQchart ( 1 ) jQuery ( 86 ) jquery-ref ( 1 ) jsGadget ( 19 ) jslb_ ( 3 ) jslb_ajax ( 9 ) JSON ( 44 ) JSR223 ( 7 ) kjscmd ( 1 ) KNOPPIX ( 1 ) Linux ( 14 ) Mac ( 8 ) Memo ( 3 ) Microformats ( 2 ) Mini AJAX ( 2 ) MochiKit ( 2 ) mootools ( 2 ) Movable Type ( 57 ) MySQL ( 10 ) NewGameWeb ( 2 ) Nucleus ( 8 ) OpenAJAX ( 3 ) OpenDocument ( 1 ) OS ( 5 ) P2P ( 2 ) Perl ( 7 ) PHP ( 37 ) PostGIS ( 1 ) PostgreSQL ( 4 ) prototype.js ( 21 ) ROBOT ( 1 ) RSSリーダー ( 14 ) Ruby on Rails ( 7 ) Spry ( 6 ) SQLite ( 11 ) SQLiteWorker ( 2 ) ssh ( 1 ) SSI ( 2 ) SVG ( 15 ) TRON ( 1 ) Video ( 1 ) VML ( 1 ) Webサービス ( 90 ) widget ( 6 ) Wiki ( 1 ) Win ( 6 ) WSH ( 1 ) X01HT ( 29 ) XML ( 28 ) XOOPS ( 1 ) XQuery ( 2 ) XUL ( 4 ) Yahoo! UI ( 59 ) 日付入力用カレンダー ( 1 ) 『Ajax実践テクニック』 ( 1 ) 『入門 Ajax』 ( 42 ) WinTips ( 2 ) こりゃすごい ( 2 ) チューニング ( 20 ) ダイナミックロード関数 ( 7 ) リファレンス ( 13 ) ライブラリ ( 90 ) レーダー雨量表示 ( 1 ) ハード ( 15 ) ペンギン ( 2 ) ブラウザ ( 61 ) ブログでBBS ( 1 ) アクセスグラフ ( 3 ) カレンダーによる日付入力スクリプト ( 4 ) クロスブラウザ ( 11 ) クロスブラウザ関数 ( 7 ) スマートフォン ( 8 ) セキュリティ ( 90 ) ソフトイーサ ( 1 ) マッシュアップ ( 22 ) 暗号 ( 4 ) 映画 ( 41 ) 河川の水位グラフ ( 3 ) 回線 ( 2 ) 開発ツール ( 17 ) 牛久大仏 ( 8 ) 携帯 ( 112 ) 言語 ( 18 ) 故障 ( 2 ) 洪水警報システム ( 2 ) 今日のひと言 ( 2 ) 仕様 ( 46 ) 雑談 ( 205 ) 書籍 ( 17 ) 親子ウインドウ有無の確認関数 ( 3 ) 新海誠 ( 3 )
【info】有料サポート(ベータ)限定 承り中 /【JSサポート(仮称)】 

【費用】 とりあえず、言い値で承ります。ただし、できる範囲での限定受付です。込み具合等によりお受けできない場合がありますのであらかじめご了承ください。サポートにご納得いただけなければ料金は不要です。 逆に感動したら多くても構いません(^^;;;。

【できること】 たとえば、かも日記で無料配布されているコードのカスタマイズや、あるいは、JavaScript/Ajax全般+Webサーバーとの連携などのアドバイス&サンプル作成等 。A:jQchartなどでWeb用グラフ設置(エクセル→CSVやデータベースからWebグラフ生成)などのアドバイスやカスタマイズサンプル作成。B:ツリーメニューなどのカスタマイズサンプル。C:Google Mapsのカスタマイズ。etc...

【できないこと】 腕立て伏せ200回

【ライセンス】 私が今まで「かも日記」等で提供してきたコードの大半は、商用利用、改造、自由、連絡不要で、今後もそれらは変わりません。そして、この有料サポートによりカスタマイズコードなどが提供される場合でも、同様に、それらを商用利用しても改造しても自由です。ただし、制限のきついライブラリなどを使う場合は、各ライブラリのライセンスに準拠せざるを得ない場合があります。

【info】いつもいろいろなテストなどをページ内のあちこちでやっているので、重かったり、壊れていたりするf^^;ことも多いですが、何卒、ご了承ください ( _ _ b

2006年05月09日

【Google Maps】v2でv1コード(GMap)を試してみる

Google Maps , 『入門 Ajax』 ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


Google Mapsが今月からデフォルトでv2になるということなので、v1コードが動くかどうかを、とりあえず簡単に試してみました。

明示的にv2として動作させる方法は、下記のようにコードの中で「v=1」となっている部分を「v=2」と書換えます。
<!-- 下記キーは、必ず自分専用のものをhttp://www.google.com/apis/maps/で取得して使ってください -->
<script src="http://maps.google.com/maps?file=api&v=1&key=xxxx.." type="text/javascript"></script>

v1をv2へ対応させるには二つの道筋があります。

一つは、v2環境となっても、今まで通りv1の「GMapクラス」を使い続ける方法で、99%互換させますとGoogleは言っています。が、コードによって、多少デバッグは必要となります。特に、隠れ機能を利用していたものは、ばっさり切ったらしいので影響はあるかも。

もう一つは、v2の新しい「GMap2クラス」を利用して新しい機能を使う方法です。

とりあえず『入門Ajax』で作ったサンプル群がv1ベースですので、これのAPI URLのクエリへ「v=2」を追加してそのままv2環境での「GMapクラス」の動作を試す、という方法でチェックしました。

『入門Ajax』のサンプルで問題のあったものは、下記の2箇所で、これ以外は問題なく動作しました。

1:: _SATELLITE_TYPEなどの古い形式の地図タイプは、正式な、頭に「G_」を付けた形式しか許してくれなくなりました。
例:
× map.setMapType(_SATELLITE_TYPE) ;//許してくれなくなった言い回し
    ↓
○ map.setMapType(G_SATELLITE_TYPE) ;//v2でも使えるv1の言い回し
    ↓
◎ map.setMapType(G_SATELLITE_MAP) ;//v2での言い回し

「入門Ajax」の該当修正サンプル03-26
http://jsgt.org/ajax/newmon/samples/chapter03v2/03-26/sample.htm
(もともと、/03-26/test_G_SATELLITE_TYPE.htmという名前でおいてあったコードです。この03-26以外のサンプルでは、「G_...」なタイプを使っていますので大丈夫です。)

で、正式には、v2では、マップタイプは以下のようになります。

v1 G_MAP_TYPE
v2 G_NORMAL_MAP

v1 G_SATELLITE_TYPE
v2 G_SATELLITE_MAP

v1 G_HYBRID_TYPE
v2 G_HYBRID_MAP

2:: xslは、safariでうまく動作しないため、サポートされなくなりました。

「入門Ajax」の該当v2修正サンプル03-29(こちらはエラーになります)
http://jsgt.org/ajax/newmon/samples/chapter03v2/03-29/sample.htm
(2006.5.9現在v=1は機能していますので下記の「v=1」と明示しているサンプルでは動作しています。が、いつ終了するかは不明です。)
http://jsgt.org/ajax/newmon/samples/chapter03/03-29/sample.htm
#Googleは、この件について、「必要なら、Safariの機能を再生させたければ、Googleのオープンソース AJAXSLTライブラリを使えます」と言っています。

*参考までに、『入門Ajax』のダウンロードサンプルには、chapter03内サンプルの「v1」をすべて「v2」に書換えたホルダ「chapter03v2」を用意してあります。



    kappasama ( 2006年05月11日 12:19 )

    こんにちは。いつも記事を参考にさせてもらっています。
    実はGoogle Maps API v2 を使用したスクリプトがうまく動作しなくて困っています。もしよかったらアドバイスをもらえないでしょうか?(以前Googleグループにも投稿したのですが解決できなくて、こちらに質問させてもらいました)

    地図表示部分の下にボタンを配置して、そのボタンをクリックすると、設定された緯度・経度に中心点を移動するようなことをしたいと考えています。作成したスクリプトを実行すると地図は表示されるのですが、ボタンをクリックするとスクリプトエラーとなってしまいます。panTo メソッドを使っているのですが、使い方を間違えているのでしょうか?Javascript の勉強を始めたばかりで根本的な間違いをしてしまっているかもしれませんが、お手を煩わせてしまうことをご容赦ください。

    -------- 抜粋 --------

    <meta http-equiv="content-script-type" content="text/javascript">
    <title>sample</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key= ...." type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
    var defaultLatitude = 47.159840;
    var defaultLongitude = 17.578125;
    var defaultZoomLv = 3;
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.setCenter(new GLatLng(defaultLatitude, defaultLongitude), defaultZoomLv);
    function moveCenter(lat, lng) {
    map.panTo(new GLatLng(lat, lng));
    }
    }
    //]]>
    </script>
    </head>
    <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height:400px;"></div>
    <form>
    <input type="button" value="移動" onClick="moveCenter(38.754083,-9.140625)">
    </form>
    </body>
    </html>
    -------- ここまで --------

    kappasama ( 2006年05月11日 13:21 )

    すいません、先ほどソースをそのまま貼り付けてしまいました。あと、確認環境はWindows XP SP2 + IE6 です。

    ...
    <script type="text/javascript">
      //<![CDATA[
      function load() {
        var defaultLatitude = 47.159840;
        var defaultLongitude = 17.578125;
        var defaultZoomLv = 3;
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.setCenter(new GLatLng(defaultLatitude, defaultLongitude), defaultZoomLv);

        function moveCenter(lat, lng) {
          map.panTo(new GLatLng(lat, lng));
        }
      }
      //]]>
    </script>
    </head>
    <body onload="load()" onunload="GUnload()">
      <div id="map" style="width: 600px; height:400px;"></div>
      <form>
        <input type="button" value="移動" onClick="moveCenter(38.754083,-9.140625)">
      </form>
    </body>

    高橋 ( 2006年05月11日 16:40 )

    こんにちは。
    関数moveCenterが関数loadの中にあるので onClickからアクセスできないのではないかと思います。
    いろいろな方法はありますが、オブジェクト指向的には、たとえば、

      this.moveCenter = function (lat, lng) {
        map.panTo(new GLatLng(lat, lng));
      }

    のように、moveCenter をthisで明示的にloadクラスのメンバーとして書いておいてから、

    <body onload="a = new load()">

    などの方法でloadのインスタンスをつくり、

    その後、そのインスタンス(ここではa)へアクセスする、
    たとえば、

    onClick="a.moveCenter(38.754083,-9.140625)"

    こんな感じでどうでしょう?
    試したものを、ここへおいておきました。
    http://jsgt.org/mt/01/maps/test37886.htm

    ただ、もちろんこのloadクラスでそのまま良のかかどうかは、、、です。

    高橋 ( 2006年05月11日 17:06 )

    すでにある map に追加する方法も作って見ました。

      map.moveCenter = function (lat, lng) {
          map.panTo(new GLatLng(lat, lng));
      }
      
      return map;

    こうしておいて、

    <body onload="a=load()">

    こうしてから、こう
    onClick="a.moveCenter(38.754083,-9.140625)"
    サンプル
    http://jsgt.org/mt/01/maps/test37886-2.htm

    高橋 ( 2006年05月11日 17:13 )

    あと、mapをグローバルにしても良ければ、もっと簡単です。
    サンプル
    http://jsgt.org/mt/01/maps/test37886-3.htm

    kappasama ( 2006年05月11日 18:25 )

    こんにちは。
    早速のご回答ありがとうございます。
    しかも3つもサンプルをいただけると、それぞれを比較できるのでとても参考になりますいろんな書き方ができるのですね。

    やっぱりオブジェクト指向的な考え方がよく分かっていなかったため、指摘してもらったようなミスをしてしまったようです。勉強になります。

    map をグローバル変数にする3番目が扱いやすいように思いましたので、この方法で引き続き書いていきたいと思います。

    改めてありがとうございました。

    maribon ( 2006年08月16日 16:59 )

    GXsltはサファリでのみサポートされないと思っていたのですが、バージョン2の移行で他のブラウザでも使えないみたいなので覗かせてもらいました。
    他のブラウザ(IE,OPERA,FireFox等)でもAJAXSLTライブラリを使えばいいということなのでしょうか?
    バージョン1に戻せば動くんですが、いつ終わるかわからないので対処に困っております。

    ひで ( 2006年08月31日 13:25 )

    はじめまして、可能かどうか教えて頂きたいのですが・・・

    実は仕事で地図上に多角形を描画し指定の色で透過させると言うのがあるのですが、Google Mapsの存在を知りこれで対応出来ないか色々しらべております。Google Mapsを最近知ったばかりでほとんど無知に近い状態です。そこで教えて頂きたい件が2件ほどあります。

    1.多角形図形の描画&塗り潰しは出来るのでしょうか?

    2.時間経過と共に塗り潰し色を変化させてりするのは可能でしょうか?

    申し訳ありませんがご教示いただけないでしょうか?
    宜しくお願いします。


    【コメント】(←clickで入力欄open)