第33回PHP勉強会で使用したスライド資料「モバイル版Googleマップのちょっと進んだ使い方」

2008/5/26 月曜日 Posted in PHP | 1 Comment »

先日の「第33回PHP勉強会」に参加させていただいたのですが、その際の発表で使用したスライド資料を公開いたします。 | View | Upload your own なお、資料内で紹介しているサンプルはこちらからご覧になれます。 1. ラインの切替 2. 円の描画 3. アニメーションGIF化(1)　※サーバ都合上結果GIFのみ公開 4. アニメーションGIF化(2)　※サーバ都合上結果GIFのみ公開 5. 操作(住所指定方式)　※ケータイからのみ 6. 操作(パラメータ変更) それぞれプログラムもあるのですが、出張の移動中に書いたのでソースがあまりキレイではないのと、ライブラリとして使えるように、現在リファクタリング中です。 近日中に公開する予定ですので、もう少々お待ちください。 なお、勉強会参加者のtwkさんが、早速ウィザードの日本語訳のページを作ってしまったそうです。 →　こちらです GoogleStaticMapsAPIに慣れていない方にはとても便利だと思います。 ぜひ合わせてご利用されると良いのではないでしょうか。   関連： 携帯サイト初心者の方に向けたセミナー資料「ケータイサイトのはなし（入門編）」 ケータイで取得した位置情報をGoogleMap形式に変換するサンプル FOMAオープンiエリアの位置情報取得機能を試してみました Read more..

「Google Static Maps API」を使って携帯でGoogleマップを表示する(ライン表示編)

2008/5/13 火曜日 Posted in ソフト紹介 | No Comments »

以前ご紹介した、「Google Static Maps APIを使って携帯でGoogleマップを表示する」という記事の続編です。 今回は地図をただ表示するだけではなく、もう少し実践的な内容をお伝えしようと思います。 「Google Static Maps API」をご存じない方のために簡単に説明すると、PC向けのJavaScriptで表示するタイプのGoogleMapとは違い、画像で表示するタイプの地図になります。 静止画なので、グリグリ動かせたりはしませんが、ケータイからも利用することができます。   今回は地図の上に、順路を示すラインを引いてみることにします。 ラインは「path」パラメータを指定することで表示できます。 path=[色],[線の太さ]|[緯度1],[経度1]|[緯度2],[経度2]・・・ [色]の部分は「rgb:#ff0000」のように、よくあるRGB形式での色指定を書きます。 それに加え、「rgba:#ff000066」のように、「rgba:（aを追加）」と書くことで、透明度を指定することもできます。 上記の例だと色が「#ff0000（赤）」、透明度が「66」ということになります。 [線の太さ]は、「weight:5」のように引きたい線の幅をピクセルで指定すればOKです。 [緯度]・[経度]を「|（パイプ）」で続けて指定していくことで、それぞれがラインで繋がれていき、線を引いていくことができます。   具体例としては次のようになります。 <img src="http://maps.google.com/staticmap? center=43.054794,141.375856 &zoom=17 &size=220x300 &maptype=mobile &markers=43.055294,141.375356,reds%7C43.053894,141.376147,bluei &path=rgba:0x0000ff66,weight:6|43.055294,141.375356|43.055243,141.37534| 43.055135,141.375171|43.054041,141.376389|43.053959,141.376249 &key=[APIキー(GoogleMapと共通)]" /> 表示例：   ケータイ用のGoogleMapでは、拡大縮小が自由に行えないため、ズームレベルの違う2種類の画像を用意しておくと親切かもしれません。   なお、詳しいAPI仕様はこちらの公式リファレンス（英語）を参照してください。 →　Google Code　Google Static Maps API [google.com]   関連： 「Google Static Maps API」を使って携帯でGoogleマップを表示する Google、モバイル向けクローラーの情報公開へ 携帯向けGoogle AdSenseがバナー広告に対応 Read more..