GoogleAPI~郵便番号から地図を表示してみる~

せっかく郵便番号検索が出来たので、郵便番号に該当する付近の地図をGoogleMAPS APIを使用して表示したいと思います。
以前紹介したmy-hobby : 知ってると便利googleマップの使い方で表示させる方法もありますが、この方法だと地図の表示のさせ方(特に噴出し部分)のカスタマイズが、現状調べた限りでは出来ない事が分かりました。

そこでよりカスタマイズが可能なJavaScriptを使用して、地図を表示させたいと思います。
先ずは簡単な地図を表示させる為のサンプルソースを以下のサイトより取得しました。
地図の基本 – Google Maps API – Google Code
【Google マップの「Hello, World」】タブにあるリンク先のページGoogle マップ JavaScript API 使用例: 簡単な地図より取得したのが以下のソースです。

[javascript]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google マップ JavaScript API 使用例: 簡単な地図</title>
<script src="http://maps.google.co.jp/maps?hl=ja&amp;amp;file=api&amp;amp;v=2&amp;amp;key=(各自取得したAPIキーを設定)"
type="text/javascript"></script>
<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.664694, 139.700016), 13);
}
}

</script>
</head>

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
[/javascript]

このソースから読み取れるのが、以下の記述の「GLatLng(35.664694, 139.700016)」で緯度と経度を設定して、その位置の地図を表示しているという事です。
map.setCenter(new GLatLng(35.664694, 139.700016), 13);
※APIの詳細な仕様については、Google Maps API リファレンス – Google Maps API – Google CodeGMap2で確認できます。

ただ、今回は郵便番号から地図を表示させたいので、上記のソースのままでは使用できません。
APIの仕様を色々探していたら、住所から緯度経度を検索し、そこから地図を表示させるAPI(クラス)GClientGeocoderを発見しました。

早速このクラスを元に、サンプルソースを作成してみました。

[javascript]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /><meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=(各自取得したAPIキーを設定); type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" >
//<![CDATA[
var map;
var geocoder;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
geocoder = new GClientGeocoder();
geocoder.getLatLng(document.mapform.address.value, showMap);
}
}

function showMap(latlng){
if (latlng){
//緯度経度が検索された場合
map.setCenter(latlng, 15);
var marker = new GMarker(latlng);
map.addOverlay(marker);
marker.openInfoWindowHtml(document.mapform.address.value);
}else{
//緯度経度が検索できなかった場合、全国の地図を表示する。
map.setCenter(new GLatLng(37.055177, 139.174805), 5);
}
}
//]]>
</script>
</head>

<body onload="load()" onunload="GUnload()">
<form name="mapform" id="mapform">
<div id="map" style="width: 700px; height: 500px"></div>
<input type="hidden" id="address" name="address" value="東京都港区芝公園4丁目2-8">
</form>
</body>
</html>[/javascript]

上記スクリプトをブラウザで表示させると以下の様な感じになります。

※東京タワーの住所を設定しています。
サンプルソースを作成するに当たり、以下のサイトを参考にしました。
住所から緯度と経度を取得(GClientGeocoderクラス, getLatLngメソッド) – ジオコーディング – Google Maps入門

結局、住所から地図を表示する方法は見つかりましたが、郵便番号から緯度経度を検索するAPI(クラス)は見つかりませんでした。
そこでダメもとで住所の代わりに郵便番号(〒105-0011)を引数にして設定してみると、
なんと郵便番号でも地図が正しく表示されました。


※東京タワーの郵便番号を設定していますが、若干位置がずれています。
これは、〒105-0011は「東京都港区芝公園」全体を指している為、東京タワーの位置にピンポイントでマーカーが当たらなかった為と思われます。
住所は位置を特定できますが、郵便番号は範囲の為、この程度の誤差は仕方が無いでしょう。

実はこのクラスって、住所以外の情報でも緯度経度を検索できるのでは?と思い、試しに「東京タワー」という文字をセットしてみたところ、、、
地図が正しく表示されました。

API仕様では住所と明言されていますが、実際に試した結果キーワード検索と同じ様な機能になっているようです。
もしこれが公式な情報になれば、地図表示の自由度(汎用性)がより高くなりますね。

ちなみに、APIの仕様がバージョンアップされているようです。
http://code.google.com/intl/ja/apis/maps/documentation/v3/
今回は旧バージョンで記事を書きましたが、新バージョンで今回の記事に関する変更があれば、また紹介したいと思います。

郵便番号検索サービス構想~検索エンジン最適化(SEO)編2/2~

前回はmy-hobby : 郵便番号検索サービス構想~検索エンジン最適化(SEO)編1/2~として、検索結果の順位を上げる為の方法を紹介しました。
今回は逆に順位を下げてしまう内容も紹介したいと思います。
紹介するポイントとしては、ついうっかりやってしまいそうな内容に絞って記事を書きました。
※なぜその様な事が必要なのかについては、検索エンジン最適化 – Wikipediaを参照して下さい。

なおこの様な検索エンジンの順位を下げてしまう様な行為を「スパム(検索エンジンスパム)」と呼びます。

スパム扱いされると、その内容によってペナルティが課せられ、検索順位が下げられてしまいます。
以下にその具体例を示します。

●一般的な注意事項
1.keywordにサイトの内容と関係ない単語を埋め込む
キーワードに指定した単語は、そのサイト内に同じ単語が存在しないと、スパムとみなされる事があります。
【対策】
全く関係ない単語を、キーワードとして登録するような事はやめましょう。

2.keywordが多すぎる
検索エンジンにヒットするように、たくさんのkeywordを記述したいのは誰でもそうですが、記述しすぎるとスパムとみなされます。
【対策】
キーワードは5個程度が目安と言われています。

3.背景色と文字色を同色にしている
マウスでスクロールすると文字が浮かび上がるので、よくあるクイズの答えみたいな感じでやってしまうと、スパム扱いとみなされる事があります。
【対策】
背景色と文字色を同色にしない

●その他
1.中古ドメインには気をつけましょう
SEO対策はしっかりやって、自分は何も悪い事していないのに、なぜか検索順位が上がらない、1ヶ月以上経っても検索エンジンにヒットしない、という事がまれにあるそうです。
理由はさまざまですが、その内の一つに、過去同じドメイン名でサイト運営していた人がスパム扱いされ、そのドメインを捨てた可能性があります。
※スパムを行なったサイトに対しては、その内容にもよりますが最も重いペナルティの場合、検索エンジンからヒットされなくなるケースもあるようです。
以下のサイトで、過去使用されたドメインの履歴を調べる事が出来るので、気になる方は試してみて下さい。
Internet Archive

調べたいURLを検索して履歴が表示された場合、過去に誰かがそのドメインを使用していたという事になります。

【対策】
ドメインを取得する前に、先ずはこのサイトで中古かどうか調べましょう。
仮に中古でも、スパム扱いされて捨てられたかどうかは知る事が出来ませんが、新品ドメインの方がより安全でしょう。

2.検索順位が下がったからといって、過敏に反応しないように
各検索サイトの検索アルゴリズムは常時仕様が変わっています。
よって、その仕様によっては、検索順位が突然上がったり、下がったりする事もあるそうです。
よって、急に検索順位が下がったからといって、サイトのデザインを変更したり、SEO対策を変えてしまうのは逆に自分のサイトが検索エンジンに振り回されてしまう結果となるので、あまり良い方法とは言えません。
急に検索順位が変わっても、暫く様子を見る事も大事だと思います。