Tag Archives: GoogleMap

ATNDのURLをコピペするだけでイベントを記事に挿入できるWordPressプラグイン

Posted on by
Reply

リリースパーティだとか、キャンプだとかビーチだとかベンチだとか、夏になってからイベントが盛りだくさんの今日この頃。

リクルートさんがやってるイベント開催支援ツールATNDに登録されたイベントのURLをコピペするだけでWordPressの記事内に表示出来ちゃうというイベント主催者様御用達のプラグインを作りました。

まだアルファ版レベルなので、仕様変更があると思いますので、ご理解いただける方のみご利用ください。

使い方

  • ATNDのイベントのパーマリンクをコピーしてWordPressのエディター上にペーストしてください。
  • あとは、保存ボタンをクリックするだけです。
  • CSSは自力でご用意下さい。

仕様

  • イベント用のデータはATND APIから取得しHTMLを生成したあと、3600秒キャッシュします。
  • キャッシュ時間はURLの末尾にhttp://atnd.org/events/9999#6000のようにハッシュリンクで指定できます。
  • テンプレート及び時間のフォーマットにはフィルターフックがありますので、テーマのfunctions.phpなどでカスタマイズできます。
    • atnd_template – テンプレートのフィルターフック
    • atnd_date_format – 日時のフォーマットのフィルターフック

今後について

以下の機能を実装した後、公式ディレクトリに登録します。

  • Googleカレンダーに登録するためのリンクを設置
  • その他のAPIとのマッシュアップ（最寄り駅の表示とか）

このバージョンをダウンロードした方でも、公式ディレクトリ掲載後は自動アップデートが適用されます。

あとフィードバックを募集中です。

HTMLの改善案とかこれとマッシュアップしたら便利だよとか。大歓迎します。

ダウンロード

アルファバージョンをダウンロード

サンプル

ATND上のデモイベントを以下に掲載しています。デモイベントに登録された内容がh1から始まったりしてるので、ちょっとバランスが変です。

ATNDデモイベント（タイトル）

このイベントはATNDのデモです。実際に開催されることはありませんが、自由に参加/キャンセルをしてみてください（サブタイトル）

SAMPLE: イベントの概要を編集しましょう。

ここでは通常のHTMLの他、 Textile記法 でも記述することができます。

Textile記法について

Textile記法では、*太字* や 斜体 、 取消線 など、HTMLを使わずに簡単に書くことができます。

うまく動かない場合は、記号の前後に半角スペースが入っているかを確認しましょう

  • 箇条書き
    1. でも
    1. 書くことが
  • できます

記法については、 こちら を参考にしてください。

プレビューについて

概要のプレビューについては PREVIEW ボタンを押してみてください。グレー地部分に変換内容が表示されます。

タイムテーブル

時間 発表者 タイトル
19:00 – 19:30 Aさん Aについて
19:30 – 20:30 Bさん Bについて
20:30 – 21:00 Cさん Cについて

場所

MTL（デモ）
住所: 東京都中央区銀座7-2-6　リクルートアネックス1ビル　B1F（デモ）

講演概要

Aについて
  • 出演
    • Aさん
    • 概要
  • 「A」の生まれた背景・概要・利点などの紹介

Bについて
  • 出演
    • Bさん
    • 概要
  • 「B」の生まれた背景・概要・利点などの紹介

日時2012年02月28日15時00分 - 2012年02月29日14時30分
参加者 / 定員48名 / 48名 (補欠者: 803名)
会場MTL
住所東京都中央区銀座7-2-6 リクルートアネックス1ビル
URLhttp://atnd.org/
主催者knjko
更新2011年10月09日05時32分

 

Google MAPS API v3でdistanceFrom（二点間の距離を求める）

Posted on by
Reply

Google MAPS API V3では、V2で実装されていた二点間の距離を計算するためのメソッドdistanceFrom()が実装されていない。

そこで、Google MAPS API v3に、distanceFrom()を実装するためのソース。

以下のソースをJavaScript内にコピペ。

google.maps.LatLng.prototype.distanceFrom = function(newLatLng) {
   var lat1 = this.lat();
   var radianLat1 = lat1 * ( Math.PI  / 180 );
   var lng1 = this.lng();
   var radianLng1 = lng1 * ( Math.PI  / 180 );
   var lat2 = newLatLng.lat();
   var radianLat2 = lat2 * ( Math.PI  / 180 );
   var lng2 = newLatLng.lng();
   var radianLng2 = lng2 * ( Math.PI  / 180 );
   var earth_radius = 6378.1;
   var diffLat =  ( radianLat1 - radianLat2 );
   var diffLng =  ( radianLng1 - radianLng2 );
   var sinLat = Math.sin( diffLat / 2  );
   var sinLng = Math.sin( diffLng / 2  );
   var a = Math.pow(sinLat, 2.0) + Math.cos(radianLat1) * Math.cos(radianLat2) * Math.pow(sinLng, 2.0);
   var distance = earth_radius * 2 * Math.asin(Math.min(1, Math.sqrt(a)));
   return distance;
}

以上で以下のようにpoint0とpoint1の距離が求められる。と思う。

var distance = point0.distanceFrom(point1);

point0とpoint1は、google.maps.LatLngオブジェクトである必要があります。

計算式そのものは、もう、わけわかんないので、間違ってたら教えてください。

IEでGoogleMapのアイコンが表示されない

Posted on by
1

Googleマップを使ったアプリケーションの開発をしていて、ieでのみ地図上のカスタムアイコンがうまく表示されなかったので、若干はまってしまった。

結局、原因はiconSizeに指定した数値が、実際の画像のサイズより小さかったため。

icon.iconSize = new GSize(51, 51);

実際の画像のサイズがいつの間にか52pxになっていたので、51pxに修正したら直った。

これは予想外

住所からGoogle MAPに変換する（JavaScript編）

Posted on by
Reply

このサイトでは、PHPのSmartyプラグインで、住所からGoogle MAPに変換するプラグインを作成して公開しています。

あちらこちらで宣伝させていただいたら、なかなか好評で、ちょっと自己満足に浸ってたのですが、よく考えたらこのプログラムって、やってることのほとんどはJavaScriptじゃんということに気がついてしまいました。

そういうわけで、JavaScriptのみで同様の機能を提供するクラスを作成したので公開します。

ダウンロード

このクラスを使用すると、以下のようにid属性にaddrが指定された要素内のテキストを住所と見なして、id属性がgmapの要素内にGoogle Mapを挿入します。

<div id="addr">東京都千代田区永田町1-7</div>
<div id="gmap"></div>

JavaScript側の記述は、<head>〜</head>内で、「Google Maps API」、「Google Ajax Search API」、「prototype.js」と、このクラスファイルを<script src=”…”></script>して、bodyの下の方に以下の記述を入れれば完了です。

<script type="text/javascript">//<![CDATA[
var gmap = new addr2gmap();
gmap.display();
//]]></script>

PHP+Smarty版と比較すると若干めんどくさいのですが、ほとんどの環境で手軽に利用できるのがメリットです。

先に紹介した、PHP+Smarty版も同じくですが、CMSなどの会社概要のページに地図を表示させたい際に手軽にGoogle MAPが利用可能なように作成していますので、あえて低機能です。

マッシュアップなんて大それた用途ではなく軽い感じで使いたいという方にご利用いただけると嬉しい限りです。

ライセンス

MITライセンスとします。
ただし、気に入っていただけた方からの寄付は歓迎します。

住所からGoogleMapに変換するSmartyプラグイン

Posted on by
15

テンプレートタグ内に記述された住所を元にGoogle MAPを埋め込むSmartyプラグインを作成しましたので公開します。

ダウンロード

このプラグインを利用すると以下のような簡単なコードをSmartyテンプレート内に記述するだけでGoogleMapが表示されます。

{addr2gmap addr=東京都千代田区永田町1-7 height=400 width=500 zoom=18}

バグやご質問等があれば、コメントに投稿していただけば、なるべく早くご回答します。

Smartyについて勉強したい方は、以下の書籍がとてもオススメです。（Amazon）
Smarty入門~PHP5＋テンプレート・エンジンでつくるMVCアプリケーション~
プラグインの自作方法も詳しく解説しています。

更新

2010/12/20
Google MAPS API V3に対応したのでAPIキーの入力が不要になりました。
また、lat、lng属性を追加しました。

ライセンス

MITライセンスとします。
ただし、気に入っていただけた方からの寄付は歓迎します。