初出：2006年10月26日 19:10
気がつくと今月は一回しか更新していなかった。書きたいネタはいくつかあるんだけど、どれも今すぐまとめておかないといけない内容かって自問自答すると、そうでもない。いわゆる「ブログ日記サイト」をやっている人たちって、ある意味スゴイなあと思うわけです。そこに書いた数行の文章、それって本当に書きたかったものなんですか? まるで排泄作業のようにも思えるんだけどね。
思いきり閑話休題。最近やたらとGoogleな話題が多いですが、今回は極めつけ。これでひとまずGoogleシリーズは終了かな。今回はGoogle Mapをサイトに組み込む方法をまとめます。まずはサンプルをどうぞ。
まあ、こんな感じで組み込めるわけです。当然ページ上でグリグリ動かせるし、航空写真との合成なんかもできます。
さて、その方法ですが、何はともあれGoogleアカウントを取得。いちいちアカウントを作るのは面倒って考えもありますけど、GMailやGoogle Talk、FireFoxユーザならGoogle Browser Syncなどにも共通で、使えるので持っていて損はないです。でもこう書くとGoogleアカウントって.Macアカウントと大差ないな。
ではGoogle Mapを組み込むのになんでアカウントが必要かというと、Google Mapを自分のサイトで利用するにはGoogle Map APIというものを使うんですが、それにはまずGoogleから認証キーを発行してもらう必要があるんです。
すると、やたらと長いキーが即座に発行されます。
次にGoogle Map APIコードレベルで実際に使っていくわけですが、世の中にはいろんなサイトで便利ツールが用意してくれているので、それを使わない手はない。その中で、今回使ったのは「Google Maps簡単作成ツール：GMapCreator」。Firefoxで動作します。
画面上に「初期画面」「コントロール」「表示」というのがあるので、左から順に設定していきます。初期画面では、先ほど発行されたGoogle認証キーを入力し、地図のサイズを指定します。
コントロールでは、地図上で指定できるいろんな機能を使うか、使わないか選択できます。訳分からんかったら、全部入りでいいでしょう。
「表示」にある「中心座標の表示」は、地図の下のほうに、その時点の中心座標を表示させるエリアが出てくるんですが、これを使うとどう便利になるのか、うーん、よく分かりません。
これらを設定したら、実際に地図でどこを表示させるか決めていきますが、これは簡単。いつものGoogle Mapの要領でサイズを変えたり、マウスでグリグリ動かして場所を選びます。…で、完成したら「コード生成」ボタンを押すと、下の方にHTMLコードがごっそりできます。
これをそのままHTMLファイルとして保存すれば、とりあえずWebページになります。もちろん装飾とかしたいですよね? その場合は以前はなるべくいじらず、<body onload="onLoad()" style="margin:0px; padding:0px;">については、onload="onLoad()" は手を付けちゃダメ。marginとpaddingは適当に数字を入れてページの余白を作るのはOK。
あー、疲れた。実はこの後に、上の地図でもやっている経路情報についての作り方もまとめようかと思っていますが、これはまた次のネタということで。いちおう、経路マップはこちらが便利です。
本日のBGM
★印があったら「これは聴いてみてほしい！」という推薦曲です。曲名をクリックするとiTunes Storeへジャンプします。
'; // loop through the songs in the array and get 4 fields that I want to see foreach ($songs as $song) { $output .= 'Recent Post
- 今日聴いてたiTunesミュージックを自動的にブログに載せて、試聴までできるようにしちゃいました。
- 【ご連絡】このブログのパーマリンクがぼろぼろにつき、URL規則を変更
- 独自ドメインのメールサーバーをGmailに移行
- iPhone、2週間使ってだんだんこなれてきました
- WebサイトをiPhoneに最適化する方法
- 水曜どうでしょう 2006年新作、完結
- Google Mapを自分のサイトに組み込む方法 2 : 経路＋マーカー編
- Googleさんは、この記事をこんな風に解釈しました
- Google Earth for Mac
- Google Moon
- Google Mapで自宅を探そう
- Today's BGMの試聴と購入
Now & Then
Twitter Updates
-
OAuthRequest('https://api.twitter.com/1.1/statuses/user_timeline.json','GET',array('screen_name' =>$search_word,'count' =>'3'));
//Jsonデータをオブジェクトに変更
$oObj = json_decode($vRequest);
//var_dump(json_decode($vRequest));
//オブジェクトを展開
for($i_tweet = 0; $i_tweet < sizeof($oObj); $i_tweet++){
$screen_name = $oObj[$i_tweet] -> {'screen_name'};//ユーザーID
$profile_image_url = $oObj[$i_tweet] -> {'profile_image_url'};//プロフィール画像のURL
$text = $oObj[$i_tweet] -> {'text'};//ツイート
$date = $oObj[$i_tweet] -> {'created_at'};//時間
$tweet_time=strtotime($date);//Unixタイムスタンプ形式に変換
$now_time=time();//現在の時刻をUnixタイムスタンプで取得
$relative_time=$now_time-$tweet_time;//つぶやかれたのが何秒前か
if($relative_time<60){//ss
$displayTime = $relative_time.'秒前';
}elseif($relative_time>=60 && $relative_time<(60*60)){//mm
$displayTime = floor($relative_time/60).'分前';
}elseif($relative_time>=(60*60) && $relative_time<(60*60*24)){//hh
$displayTime = floor($relative_time/(60*60)).'時間前';
}elseif($relative_time>=(60*60*24)){//日付
$displayTime = date('n月j日',$tweet_time);
}
//表示
echo '
- ' . $text .'' . $displayTime . ' '; } ?>
