GoogleMapMarker (1.0c for ditto v2+)

参照ページ：GoogleMapMarker 1.0c for ditto v2+

テスト環境

• サーバ：さくらインターネット 　
  • PHP 5.2.6
  • MYSQL 4.0.27
• サーバ：XREA 　
  • PHP 5.2.3
  • MYSQL 5.1.20-beta
• MODx： 0.9.6.1系
• GoogleMapMarker (1.0c for ditto v2+)

また Ditto のバージョンは、2.0.2、2.1bata で確認しました

基本的な書式

[!GoogleMapMarker? &apiKey=`ABQI...`!]

ドキュメントのキャッシュは「可」で、動作しますが、スクリプトが２重に挿入されるかもしれません。その場合でも、動作に問題はないようですが、気になる場合は、ドキュメントのキャッシュを不可にすると、スクリプトが２重に挿入される現象を回避できます。

必須条件

• Ditto 2.0.2 以上が導入されていること（マーカー情報をドキュメントから取得するために必要です）

利用方法

PHxファンクション用モディファイアを作成する

モディファイアはスニペットとして作成します。以下の様式で作成してください

スニペット名：phx:slashandstrip

<?php
return addcslashes(preg_replace("~([\n\r\t\s]+)~"," ",$output), "'");
?>

※尚、Ditto 2.x系が、PHxファンクションを独自にサポートしているため、別途PHxプラグインを導入する必要はありません※

補足 - 旧バージョンについて

旧バージョン（GoogleMapMarker Ver1.0c）では、上記の機能がなかったために、ポップアップする説明を「内容」に書く際、以下の制限がありました

• 「'」を使う場合は、必ず直前に「\」をつけなければらない
• また、ポップアップする説明を書くとき、改行せず１行にずらっとかかなければならない。

上記の制限を守らないと、地図が表示されませんでした。これは、JavaScriptを動作させる際の制限によるものと思われます。

バージョンアップにより、PHxファンクションが導入され、これらの制限を回避することができるようになりました。

マーカー用ドキュメントを作成する（例）

1. 新規にドキュメントを作成する（GoogleMapMaker コールを書く）
   • [[GoogleMapMarker? &apiKey=`ABQIAAAA...`]] 等
2. 上記ドキュメントの下にマーカー用ドキュメントを作成する。マーカー１個につき、１つのドキュメントを使用します。
   • タイトル ... マーカータイトルになります。デフォルトで map の右側にリストアップされます
   • 説明 ... マーカーの位置を記述します「35.688054,139.762686」などです。
   • 内容 ... マーカーや、リストアップされたタイトルをクリックしたときに、ポップアップされる説明を記述します。

ドキュメントツリーでのイメージ

GoogleMap Call 用ドキュメント（公開）
　└ マーカー用ドキュメント（非公開）
　└ マーカー用ドキュメント（非公開）
　└ ... （非公開）

• GoogleMapMaker コール用ドキュメントはマーカー用ドキュメントの親でなくてもよいです
• マーカー用ドキュメントは、必ず「非公開」にします（そうしないと地図が表示されません）。

マーカー用ドキュメントを公開したい場合

スニペットを変更します

$script .= $modx->runSnippet($dittoName,array('descendentDepth' => $descendentDepth, 'sortBy' => $sortBy, 'sortDir' => $sortDir, 'summarize' => 'all', 'displayArchive' => '0', 'tpl' => $dittoChunk, 'startID' => $startID, 'showPublishedOnly' => '0', 'trunc' => '0'));

上記の「'showPublishedOnly' => '0'」を「'showPublishedOnly' => '1'」に変更します。

パラメータ

apiKey (必須)

GoogleMaps API key を指定します。

スニペット中のサンプルには、「&apikey=`...`」となっていますが、正しくは「&apiKey（K は大文字）」。

API key を取得するには？

AIP keyは、「http://www.google.com/apis/maps/signup.html（英語）」で入手できます。

startID

マーカードキュメントが所属する親ドキュメントのIDを指定します。

Ditto でリストアップしますので、Ditto の「parents」パラメータと同じようなものと思っていいでしょう。デフォルト「なし」。

注意点

Ditto に依存するので、php の設定で「short_open_tag Off」としている場合、デフォルトのDitto 2.0.2 では、エラーを起こし地図を表示できません。 この場合、「confings/default.confing.php」の以下を修正することにより解決できます。

<?
// Use the following syntax $param = 'value';
?>

↓

<?php
// Use the following syntax $param = 'value';
?>

Ditto の出力する RSS でもパースエラーを起こしているはずなので、GoogleMapMakarを使用しない場合も、Ditto側の修正事項としてあらかじめ修正しておいた方が良いでしょう。

参照：MODx0.9.6の問題点と対策：feed.rss にアクセスすると、パースエラーが表示される

descendentDepth

マーカーとして取得するドキュメントの階層を指定します。デフォルト「1（１階層のみ）」。「0」を指定するとすべての階層から取得するようです。

sortBy

マーカーを並べ替える際、基準とするフィールドを指定します。デフォルト「createdon」。「menuindex」などでも並べ替えられます。

sortDir

降順（DESC）か昇順（ASC）かを指定します。デフォルト「ASC（昇順）」。

tpl

GoogleMap 用のテンプレートを指定します。デフォルトは以下です。

<div id="'.$mapDiv.'" style="float:left; width: 350px; height: 350px;">Loading map...</div>
<div id="'.$linksDiv.'" style="margin-left: 10px; padding-right: 10px; float: left; display: block; height: 350px; overflow: auto;"></div>
<noscript>
<b>JavaScript must be enabled in order for you to use Google Maps.</b> 
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>

テンプレート作成上の注意点

テンプレートは、必ず、２つの<div>～</div>ブロックが必要です。すなわち、マップを表示するための<div>～</div>ブロック、および、マーカーリストを表示するための<div>～</div>ブロックです。

また、tpl を指定した場合は、tpl 中で指定した地図表示用のブロックの<div>のidと後述の「&mapDiv」の値、及び、リスト表示用のブロックの<div>のidと「&linksDiv」の値を同一にして下さい。そうしないと地図が表示されなくなります。

インスタンス

<div id="maparea">Loading map...</div> // 地図表示用ブロック
<div id="maplinksarea"></div> // リスト表示用ブロック

上記の場合であれば、スニペットコールで、それぞれ「&mapDiv=`maparea`」「&linksDiv=`maplinksarea`」を指定します。

また、地図表示用ブロックには、CSS で widht と height を指定する必要があります。以下のようにインラインで定義しても構いませんし、外部スタイルシートに定義しても良いです。

<div id="maparea" style="width: 440px;height: 350px;">Loading map...</div>

mapDiv

マップ表示用 <div> の id を指定します。デフォルト「map」。

「&tpl」で指定したidと同じ値を指定します。「&tpl」で指定したidが「map」であるならば、省略して構いません。また、tplを指定しない場合も省略できます。

tpl を指定しない場合で、この値を「map」以外の値にすると該当箇所の値が変更されます。

インスタンス

<div id="maparea">...</div>

linksDiv

マーカーリスト表示用 <div> の id を指定します。デフォルト「maplinks」。

「&tpl」で指定したidと同じ値を指定します。「&tpl」で指定したidが「maplinks」であるならば、省略して構いません。また、tplを指定しない場合も省略できます。

tpl を指定しない場合で、この値を「maplinks」以外の値にすると該当箇所の値が変更されます。

インスタンス

<div id="maplinksarea">...</div>

linksClass

各マーカー用のタグに挿入するクラス名を指定します。デフォルト「maplink」。

インスタンス

// add a line to the sidebar html
sidebar_html += '<div class="maplink"><a href="javascript:void(0)" .....'</a></div>';
i++;

mapType

地図のタイプを指定します（マップタイプボタンの選択状態を指定します）。デフォルト「normal（地図を表示）」。以下を指定できます。

• normal ... 地図
• satellite ... 航空写真
• hybrid ... 地図 + 写真

※ボタンデザインは「Map design aid」で確認できます。

centerPos

地図を表示する際の最初の中央座標を指定します。デフォルト「63.098332,23.056698」（フィンランドの方らしい？）。ちなみに新宿駅は「35.690137,139.700003」くらいです。「Map design aid」で確認できます。

defaultZoom

最初の縮尺レベルを指定します。デフォルト「8」。数が大きいほど、拡大された地図になります。「Map design aid」で確認できます。

mapControl

マップコントロールの大きさを指定します。デフォルト「large」。以下を指定できます。

• large ... 大きい
• small ... 小さい
• zoomonly ... ズームボタンのみ
• none ... なし

※コントロールのデザインは「Map design aid」で確認できます。

mapTypeControl

マップタイプボタンの大きさを指定します。デフォルト「large」。以下を指定できます。

• large ... 地図／航空写真／地図 + 写真
• small ... 地図／写真／両方
• none ... なし

※ボタンデザインは「Map design aid」で確認できます。

openMouseOverMarker

マーカの上をマウスカーソルが通過したときインフォメーションボックスを開くかどうかを指定します。デフォルト「しない（0）」。

openMouseClickMarker

マーカーをクリックしたときインフォメーションボックスを開くかどうかを指定します。デフォルト「する（1）」。

openMouseOverLink

マーカーリンクの上をマウスカーソルが通過したときにインフォメーションボックスを開くかどうかを指定します。デフォルト「しない（0）」。

openMouseClickLink

マーカーリンクをクリックしたときインフォメーションボックスを開くかどうかを指定します。デフォルト「する（1）」。

showOverviewMap

オーバービューマップを利用するかどうかを指定します。デフォルト「する（1）」。

overviewMapSize

オーバービューマップを利用するとき（showOverviewMap=`1`のとき） のサイズを指定します。デフォルト「150, 150」。

hideOverviewMapByDefault

オーバービューマップを利用するとき（showOverviewMap=`1`のとき）、最初に地図を表示したときに、オーバービューマップを隠した状態にするかどうかを指定します。デフォルト「する（1)」。

dittoName

Ditto のスニペット名を変更している場合、指定します。デフォルト「Ditto」。

Google Map を扱う上で便利なツール

座標を調べたり、地図の大きさや、縮尺、コントロールの大きさなどを視覚的に確認できる「Map design aid」が便利です。

また、日本にも、座標を取得できるツールがいくつかあります。二つほどご紹介しておきます。

• 第七章　Google Mapsを利用する：座標を取得して表示する ... サンプルを表示させるとそこで、中心座標や、範囲座標を知ることができる
• Google Maps(Local) で座標位置を取得するブックマークレット - AUSGANG SOFT ... ブックマークレットにリンクを登録して利用する。GoogleMapを表示して中心地点をダブルクリックしてから、ブックマークレットにアクセスすると中心座標を知ることができる。ツールバーに登録しておくと便利。

サンプル

• 簡単なサンプル
• ブログに利用した例

<div class="g-maparea">
<div id="map2">Loading map...</div>
<div id="maplinks2"></div>
</div>

div.g-maparea {
margin-botttom:1em;
margin-left:36px;
color:#333;
}
div.g-maparea #map2 {
width: 400px;
height: 400px;
float:left;
border:3px double #CC0;
}
div.g-maparea #map2 h4 {
color:#333;
}
div.g-maparea #maplinks2 {
margin-left:420px;
}