Scribbling for "Scripting"

またまたショートコードタグですが、今回はGoogle Mapsを表示するショートコードタグです。GeoCodingを利用しているので住所をタグで囲むだけでマップが表示されます。これも前回の翻訳タグ同様、GoogleのサンプルJavaScriptをほとんどそのままラッピングしているだけです。
// [gmapwithgc (nosinglemsg="message" id="id" width="width" height="height" zoom="zoom")]address[/gmaiwithgc]
// googleマップを住所で表示
function gmapwithgc_func($atts, $content='') {
  extract(shortcode_atts(array(
    'nosinglemsg' => '',
    'id' => 'gmap0',
    'width' => '500px',
    'height' => '300px',
    'zoom' => '14',
  ), $atts));
  if($nosinglemsg != "" and !is_single()){
    return $nosinglemsg;
  } else {
    return <<<_EOT_
    <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=●●" type="text/javascript"></script>
      <div id="$id" style="width: $width; height: $height"></div>
      <script type="text/javascript">
    map = new GMap2(document.getElementById("$id"));
    geocoder = new GClientGeocoder();
        geocoder.getLatLng("$content",
        function(point) {
      if (!point) {
        alert("$content" + " not found");
      } else {
        map.setCenter(point, $zoom);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml("$content");
      }
    });
    </script>
_EOT_;
  }
}
add_shortcode('gmapwithgc', 'gmapwithgc_func');

ソースの●●部分はご利用のGoogle Maps APIキーに置き換えてください。
使い方は記事内に以下のようなタグを入れると、Google Mapsが表示されます。
[gmapwithgc]東京タワー[/gmapwithgc]

サイズや拡大率を指定できます。
[gmapwithgc width=”400px” height=”350px” zoom=”10″]富士山[/gmapwithgc]

シングルページのみマップを表示する場合は以下のようにシングルページ以外で表示されるメッセージを指定してください。
[gmapwithgc nosinglemsg=”記事のタイトルをクリックしてシングル表示にしてください”]東京タワー[/gmapwithgc]

ひとつの記事に複数タグを入れたい場合は重複しないidを指定してください。
[gmapwithgc id=”gmap2″]東京タワー[/gmapwithgc]

以下は実際にタグを埋め込んだサンプルです。
シングルページにするとマップが表示されます

WordPress2.5のショートコードタグ関連のネタとして、Google翻訳APIを利用するショートコードタグを作ってみました。とはいっても実質はGoogleのドキュメント内のサンプルJavaScriptをラッピングしているだけですが(^^;

// [gtranslate (sl="SourceLang" tl="TargetLang" id="id")]content[/gtranslate]
// タグに囲まれた部分をgoogle翻訳する(デフォルトは日→英)
function gtranslate_func($atts, $content='') {
  extract(shortcode_atts(array(
    'sl' => 'ja',
    'tl' => 'en',
    'id' => 'gtrans',
  ), $atts));
  return <<<_EOT_
    <div id="$id"></div>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("language", "1");
    function initialize() {
      google.language.translate("$content", "$sl", "$tl", function(result) {
        if (!result.error) {
        var container = document.getElementById("$id");
        container.innerHTML = result.translation;
        }
      });
    }
    google.setOnLoadCallback(initialize);
  </script>
_EOT_;
}
add_shortcode('gtranslate', 'gtranslate_func');


使い方としては記事内に以下のようなタグを入れれば、次の行の様に翻訳されます。
[gtranslate]我々はこの老人を知っています。[/gtranslate]

ひとつの記事に複数タグを入れたい場合は重複しないidを指定してください。
[gtranslate id=”gtrans2″]いえ、この眼差しと顔の傷を知っています。[/gtranslate]