シリコンバレー在住エンジニアの、Perl、PHP、AJAX、Drupal、Java の小枝集です。( 7,832,983 since 2005.02.20 )
ブログ (Movable Type) と Google Map を組み合わせる
- ブログを利用する。
- ブログに自分の好きな地域（どこかは予め決めておく）の地図を表示する。
- 地図にはマーカーが表示される。
- マーカーの情報は AJAX (XMLHttpRequest) の非同期通信により、サーバーから XML ファイルを読み込んだものである。
- マーカーをクリックすると吹き出しにその地点の情報が出る。
- 吹き出し中の「続きを読む」リンクをクリックすると、ブログエントリにジャンプする。
- マーカーは自分独自のアイコンを使う。
- 拙作のサイト→ yas の部屋「ベイエリアレストランガイド」
//<![CDATA[
var BASE_URL = "https://2kids.net";
var GMAP_FILE = "/yas/gmap.xml";
var ICON_DEFAULT = "/yas/images/icon_restaurant.png";
var ICON_SHADOW = "/yas/images/icon_restaurant_shadow.png";
var map;
var baseicon;
var xmlHttp;
function init() {
map = new GMap(document.getElementById("map")); // 地図オブジェクトを生成
baseicon = new GIcon(); // アイコンオブジェクトを作成
xmlHttp = GXmlHttp.create(); // XmlHttpRequest オブジェクトを作成
// 地図を設定
map.addControl(new GLargeMapControl()); // 拡大縮小のボタン
map.addControl(new GMapTypeControl()); // 地図と衛星の切り替え
map.centerAndZoom(new GPoint(-122.0745, 37.4170), 7); // ベイエリアを表示
// アイコンを設定
baseicon.image = BASE_URL + ICON_DEFAULT;
baseicon.shadow = BASE_URL + ICON_SHADOW;
baseicon.iconSize = new GSize (16, 16);
baseicon.shadowSize = new GSize (34, 20);
baseicon.iconAnchor = new GPoint( 8, 8); // <- (icon_width / 2, icon_height)
baseicon.infoWindowAnchor = new GPoint( 9, 2);
baseicon.infoShadowAnchor = new GPoint(18, 25);
// マーカーを設定: XML データを読み込んで表示
xmlHttp.open("GET", BASE_URL + GMAP_FILE, true);
xmlHttp.onreadystatechange = showMarkers;
xmlHttp.send(null);
}
function showMarkers() {
if (xmlHttp.readyState == 4) {
var xmlDoc = xmlHttp.responseXML;
var marker = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < marker.length; i++) {
addMarker(marker[i]);
} // End of for
}
}
function addMarker(xml) {
var point = new GPoint(xml.getAttribute("lng"),
xml.getAttribute("lat"));
baseicon.image = BASE_URL + xml.getAttribute("icon");
var icon = new GIcon(baseicon);
var marker = new GMarker(point, icon);
map.addOverlay(marker);
var html = '<div id="InfoWindow">'
+ '<img src="' + baseicon.image + '" alt="icon"> '
+ '<a href="' + xml.getAttribute("site") + '">'
+ xml.getAttribute("name")
+ '</a><br />'
+ xml.getAttribute("street") + '<br />'
+ xml.getAttribute("city") + '<br />'
+ xml.getAttribute("phone") + '<br />'
+ '<a href="' + BASE_URL + xml.getAttribute("link") + '">'
+ 'レビューを読む'
+ '</a><br />'
+ '</div>';
GEvent.addListener(marker, "click", function() {
// marker.showMapBlowup(3); // 吹き出しに地図が表示される模様。
// map.centerAndZoom(p, 3);
marker.openInfoWindowHtml(html);
}); // click のイベントリスナ登録
}
//]]><markers>
<marker
lng="-121.9485855102539" lat="37.318707484418496"
icon="/yas/images/icon_mexican.png"
name="Chevys Winchester"
site="https://www.chevys.com/"
link="/yas/archives/cat60/#a000761"
street="550 S. Winchester"
city=" San Jose, CA 95128"
phone="(408) 241-0158"
/>
<!-- 以下、上と同じデータの繰り返し。必要なだけ増やす。-->
</markers>- Movable Type 3.2 Release 2 (日本語版)
- Firefox 1.0.7 または IE 6.0SP2 または Safari 2.0.1
- アイコンの作成 (Google Map に表示するマーカーのこと)
- JavaScript 作成 (Google Map 用)
- map.xml の作成 (XMLHttpRequest を使ってマーカーの情報を読み込む)
- ブログテンプレートの修正
- スタイルシートの設定
- ブログエントリの追加
- Google Map API では、マーカーと呼ばれるポイントを指し示すアイコンが必要となる。Google が用意したデフォルトのマーカーアイコンはオレンジ色の水玉を逆さにしたような感じのものだが、これは自由にカスタマイズできる。
- アイコンの実体は画像ファイルである。画像のフォーマットは、JPEG、GIF、PNG が使えるが、PNG がいいだろう。
- なぜなら、アイコンには影を付けられるのだが、この影は、αチャネルを透過にした PNG を使うことになっているからだ (まぁ、どの画像フォーマットを選ぶかは実際は好みの問題だ)。
- ちなみにアイコンの影は、オリジナルのアイコンに対して45度の傾きを付けるのが、Google からのガイドラインのようである。実際影をつけるのは結構難しかった。私の場合はオリジナル画像をグレー処理し、その後何度かソフト処理をし、ぼかしをかけた…という感じで、この作業に多くの時間を取ってしまった＾＾；
var BASE_URL = "https://2kids.net";
var baseicon;
function init() {
baseicon = new GIcon(); // アイコンオブジェクトを作成
// アイコンを設定
baseicon.image = BASE_URL + "/yas/images/icon_restaurant.png";
baseicon.shadow = BASE_URL + "/yas/images/icon_restaurant_shadow.png";
baseicon.iconSize = new GSize (16, 16);
baseicon.shadowSize = new GSize (34, 20);
baseicon.iconAnchor = new GPoint( 8, 8); // <- (icon_width / 2, icon_height)
baseicon.infoWindowAnchor = new GPoint( 9, 2);
baseicon.infoShadowAnchor = new GPoint(18, 25);
baseicon.image = BASE_URL + xml.getAttribute("icon");
}
function addMarker(xml) {
var point = new GPoint(xml.getAttribute("lng"),
xml.getAttribute("lat"));
baseicon.image = BASE_URL + xml.getAttribute("icon");
var icon = new GIcon(baseicon);
var marker = new GMarker(point, icon);
map.addOverlay(marker);
}
//]]>- テンプレート名: gmap.js (←ここは実は何でもいい)
- このテンプレートにリンクするファイル: gmap.js (別のテンプレートから使用するファイル名)
- モジュールの内容: 冒頭の JavaScript
map.xmlというファイル名で、XML ファイルを保存する。以下に XML ファイルの内容 (属性) を説明しよう (属性は独自に設定したものです)。
<markers>
<marker
lng="-121.9485855102539" lat="37.318707484418496" <font color="blue">← ここは、</font><b><font color="orange">経度</font><font color="blue">・</font><font color="red">緯度</font></b><font color="blue">の順で入る</font>
icon="/yas/images/icon_mexican.png" <font color="blue">← アイコン画像へのルートからのパス + ファイル名 (https:// は、JavaScript 中の最初に記述済み)</font>
name="Chevys Winchester" <font color="blue">← 吹き出し中の一番上に表示される、マーカーの名前</font>
site="https://www.chevys.com/" <font color="blue">← マーカーの名前をクリックすると表示されるウェブページ</font>
link="/yas/archives/cat60/#a000761" <font color="blue">← Movable Type のブログのエントリへのリンク※</font>
street="550 S. Winchester" <font color="blue">← マーカーの住所 (サンプルはアメリカなので番地が先)</font>
city=" San Jose, CA 95128" <font color="blue">← マーカーの住所 (サンプルはアメリカなので市町村がが後)</font>
phone="(408) 241-0158" <font color="blue">← 電話番号</font>
/>
<!-- 以下、上と同じデータの繰り返し。必要なだけ増やす。-->
</markers>- メインページ
- アーカイブ → カテゴリーアーカイブ
- アーカイブ → 日付アーカイブ
- アーカイブ → 個別エントリーアーカイブ
<head>
…
<script src="https://maps.google.com/maps?file=api&v=1&key=ここにあなたが取得した Google Map API のキーが入る" type="text/javascript"</script>
<script src="/ルートからブログへのパス/gmap.js" type="text/javascript"></script>
</head>
<body onLoad="init()">
…
</body><a name="a<$MTEntryID pad="1"$>">
<h3 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h3>
</a><p class="posted">
投稿者 <$MTEntryAuthor$> : <a href="<$MTEntryPermalink valid_html="1"$>"><$MTEntryDate format="%Y/%m/%d"$></a>
<MTEntryIfAllowComments>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">コメント (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">トラックバック</a>
</MTEntryIfAllowPings>
| <a href="#a000835">地図に戻る</a>
</p>#map {
font-family: "Trebuchet MS", Trebuchet, verdana, arial, sans-serif;
text-align: center;
}
#InfoWindow {
font-family: "Trebuchet MS", Trebuchet, verdana, arial, sans-serif;
}<div id="map" style="width: 500px; height: 400px;"></div>
トラックバック URL:
https://perltips.twinkle.cc/trackback/20
