Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
モバイル版GoogleMapの
ちょっと進んだ使い方
    ke-tai.org
    松井 健太郎


                  Ver 1.01
自己紹介
名前: 松井健太郎
出身: 北海道北広島市(札幌の隣町)
職業: PHPプログラマ、Linuxサーバ管理者



ケータイ開発者向けの情報サイトを
運営しています。
http://ke-tai.org/

札幌で小さな会社を営んでいま...
本日の内容
• モバイル版のGoogleマップのイロハ
  ・ GoogleStaticMapsAPIの概要と基本的な使い方
  ・ マーカーの設置、ラインの描画
• もう少し凝った使い方
  ・ 複数のマーカーやラインを切り替えてみよう
  ...
モバイル版Googleマップのイロハ(1)
               概要
   ケータイでGoogleMapを表示するには
   「Google Static Maps API」を利用する
      出来ることは静止画の表示のみ
   ...
モバイル版Googleマップのイロハ(2)
              基本的な使い方
   imgタグのsrcにパラメータを記載する

<img src=“[パラメータ]”>




http://maps.google.com/static...
モバイル版Googleマップのイロハ(3)
                 マーカーの設置
      指定した座標にマーカーを設置する
markers=[緯度],[経度],[サイズ][色][文字]
例1:
& markers=43.0552...
モバイル版Googleマップのイロハ(4)
                             ラインを引く
               複数の座標を結ぶラインを描く
path=[色],[線の太さ]|[緯度1],[経度1]|[緯度2],...
まあ便利なんだけど・・・
まあ便利なんだけど・・・


    地味
  (´・ω・`)
・・・ということで、
もう少しがんばってみた


  (`・ω・´)
もう少し凝った使い方(1)
     マーカーやラインの切替
マーカーやラインを切り替えて動きをつける
例.「ご来場ルート」と「お帰りルート」を表示したい




               リンクを押して
               画像...
もう少し凝った使い方(2)
              円の描画
         ラインで円を描画する
例.四角いラインではなく円を表示したい



円の方程式を使って、頂点の座標を計算し、
それらをラインで繋ぐ。




頂点の数を多くする...
もう少し凝った使い方(3)
             アニメーションGIF化
     ImageMagickでアニメーションGIF化する
ImageMagickまたはPECL::Imagickを利用
(PHP標準のGDでは作成できないようだ)...
もう少し凝った使い方(4)
          地図を操作できるようにする
              PC版のようにぐりぐりと動かしたい
方法1.住所を指定してGoogleに飛ばしてしまう

<?php
 $address = '東京都港区東...
もう少し凝った使い方(5)
     地図を操作できるようにする
方法2.ユーザの操作に合わせパラメータを変え、
    マップ画像を切り替える

・パラメータを、ユーザの操作に合わせて変更する
・zoomパラメータは「拡大」「縮小」リンクが押...
まとめ
• モバイル版Googleマップは、静止画で地図の表
  示を行う
  ・ PC版のようにぐりぐりと動かしたりはできない
  ・ ただしマーカーの設置やラインの表示は行える


• 見た目や使い勝手を改善するために、主に次
  のような...
ご清聴ありがとうございました。
モバイル版Googleマップのちょっと進んだ使い方
モバイル版Googleマップのちょっと進んだ使い方
Upcoming SlideShare
Loading in …5
×

モバイル版Googleマップのちょっと進んだ使い方

18,989 views

Published on

Published in: Technology
  • Be the first to comment

モバイル版Googleマップのちょっと進んだ使い方

  1. 1. モバイル版GoogleMapの ちょっと進んだ使い方 ke-tai.org 松井 健太郎 Ver 1.01
  2. 2. 自己紹介 名前: 松井健太郎 出身: 北海道北広島市(札幌の隣町) 職業: PHPプログラマ、Linuxサーバ管理者 ケータイ開発者向けの情報サイトを 運営しています。 http://ke-tai.org/ 札幌で小さな会社を営んでいます。 株式会社インフィニットループ http://www.infiniteloop.co.jp/
  3. 3. 本日の内容 • モバイル版のGoogleマップのイロハ   ・ GoogleStaticMapsAPIの概要と基本的な使い方   ・ マーカーの設置、ラインの描画 • もう少し凝った使い方   ・ 複数のマーカーやラインを切り替えてみよう   ・ 様々なラインを引いてみよう   ・ 地図を操作できるようにしてみよう • 質疑応答
  4. 4. モバイル版Googleマップのイロハ(1) 概要 ケータイでGoogleMapを表示するには 「Google Static Maps API」を利用する 出来ることは静止画の表示のみ - ただし次の項目が設定可能 - ・表示する座標と拡大率の指定 ・画像サイズ指定 (例:220ドット×300ドット) ・フォーマットの切替 (JPG, GIF, PNGを選択可能) ・マーカーの指定 (複数のマーカーを設置可能) ・ラインの指定 (色の指定、透明度の指定が可能、ラインは1本のみ)
  5. 5. モバイル版Googleマップのイロハ(2) 基本的な使い方 imgタグのsrcにパラメータを記載する <img src=“[パラメータ]”> http://maps.google.com/staticmap? center=[中心の緯度],[中心の経度] &zoom=[ズームレベル] &size=[画像の横幅]x[画像の高さ] &maptype=mobile &key=[APIキー(GoogleMapと共通)]
  6. 6. モバイル版Googleマップのイロハ(3) マーカーの設置 指定した座標にマーカーを設置する markers=[緯度],[経度],[サイズ][色][文字] 例1: & markers=43.055294,141.375356,smallred パイプ「|」で区切ることで複数マーカーの 設置も可能 例2: &markers=43.055294,141.375356,smallred|| 43.053894,141.376147,bluei 注1:サイズがtiny, smallの場合は文字を指定できない 注2:マーカーが複数の場合はcenterやzoomを省略できる 注3:パイプは必要に応じてURLエンコード(%7C)すること
  7. 7. モバイル版Googleマップのイロハ(4) ラインを引く 複数の座標を結ぶラインを描く path=[色],[線の太さ]|[緯度1],[経度1]|[緯度2],[経度2]・・・ パイプ「|」で区切って座標を指定していく ・透明度指定なしの場合 rgb:0x0000ff,weight:6|43.055294,141.375356 |43.055243,141.37534|43.055135,141.375171 |43.054041,141.376389|43.053959,141.376249 ・透明度指定ありの場合 rgba:0x0000ff66,weight:6|43.055294,141.375356 |43.055243,141.37534|43.055135,141.375171 |43.054041,141.376389|43.053959,141.376249 注:ラインがある場合はcenterやzoomは省略できる
  8. 8. まあ便利なんだけど・・・
  9. 9. まあ便利なんだけど・・・ 地味 (´・ω・`)
  10. 10. ・・・ということで、 もう少しがんばってみた (`・ω・´)
  11. 11. もう少し凝った使い方(1) マーカーやラインの切替 マーカーやラインを切り替えて動きをつける 例.「ご来場ルート」と「お帰りルート」を表示したい リンクを押して 画像を切り替え
  12. 12. もう少し凝った使い方(2) 円の描画 ラインで円を描画する 例.四角いラインではなく円を表示したい 円の方程式を使って、頂点の座標を計算し、 それらをラインで繋ぐ。 頂点の数を多くすることで、一見滑らかな 円に見えるようになる。
  13. 13. もう少し凝った使い方(3) アニメーションGIF化 ImageMagickでアニメーションGIF化する ImageMagickまたはPECL::Imagickを利用 (PHP標準のGDでは作成できないようだ) 複数の画像をGoogle側から取得し、それをGIFアニメ化する。 例1. 道順をアニメーションで表示したい  → ラインを細かく区切り、連続して描画 → ラインを かく区切区切り 連続して して描画 例2. 道順を点滅させたい  → ラインの透明度を変化させる → ラインの透明度を変化させる ただし、こんなデメリットも・・・ ・生成処理に時間がかかる(要キャッシュ処理) ・画像のサイズが大きくなってしまう
  14. 14. もう少し凝った使い方(4) 地図を操作できるようにする PC版のようにぐりぐりと動かしたい 方法1.住所を指定してGoogleに飛ばしてしまう <?php $address = '東京都港区東麻布3-3-1'; $url = 'http://www.google.co.jp/m/lcb'; $query = '?mp=1&source=m&id=%s&ie=Shift_JIS&action=setloc&loc=%s'; $id = md5(time() . microtime()); // IDを生成 $location = $url . sprintf($query, $id, urlencode($address)); header('Location: ' . $location); // ページを移動 ?> ・住所から場所を特定するので多少の誤差が出てくる ・規約に違反していないのか、やや心配
  15. 15. もう少し凝った使い方(5) 地図を操作できるようにする 方法2.ユーザの操作に合わせパラメータを変え、     マップ画像を切り替える ・パラメータを、ユーザの操作に合わせて変更する ・zoomパラメータは「拡大」「縮小」リンクが押されたら  ±1してやればよい。 ・centerパラメータは次の式から計算(横220pxの場合)  移動距離 = 0.0008 * floatval(pow(2, 18 - $zoom)); ※問題点 GoogleStaticMapsAPIは、1日当たり1000ユニーク画像 までしか、画像を生成させて貰えない。  → 移動できる領域を制限してやる必要がある  → 拡大・縮小だけでも十分かもしれない
  16. 16. まとめ • モバイル版Googleマップは、静止画で地図の表 示を行う   ・ PC版のようにぐりぐりと動かしたりはできない   ・ ただしマーカーの設置やラインの表示は行える • 見た目や使い勝手を改善するために、主に次 のような方法が考えられる   ・ 地図画像を複数用意し、それらを切り替えて表示   ・ アニメーションGIF化して表示   ・ パラメータを動的変化させ、操作に合わせて地図を表示    (ただし、1日あたりの枚数制限に注意)
  17. 17. ご清聴ありがとうございました。

×