nxt web site

GoogleMapにまた新しい機能が追加されました。
ブログやホームページに簡単に地図を貼り付ける機能です。

more...

最近はWEB上での地図サービスも充実してきました。
住所からの検索、周辺の情報、距離の計測、移動時間 etc.

平面、時間ときて他に欲しい情報は...。
そう、「高さです。」

ということで探していたらありました。

more...

最近、自転車がブームらしいですね。
なんでも、子供の頃、小学校の規則でドロップハンドルの自転車に乗ることが禁止だった、昭和30年代後半〜昭和40年生まれの方々、つまり"ドロップハンドル"という響きに特別なあこがれ?を持つ世代層が、昨今の健康ブームにのって、ロードレーサーに乗り始めているとか。

more...

Googleマップカスタマイズ3回目は、地図にコントロールボタンを表示する方法です。

前回作成した地図を拡大・縮小したり、航空写真にするためのボタンをつけます。

■大きいコントロールボタン
4方向の移動ボタンと、ズームイン、ズームアウトとズームスライダーを表示します。
GLargeMapControlを作成し、addControlで追加します。
4つの外向き矢印の中心にある内向き矢印のボタンは、元の状態に戻すボタンです。地図を移動させてもそれをクリックすれば
コードの中でセットした中心とズームレベルに戻ります。
→サンプル

■小さいコントロールボタン
4方向の移動ボタンと、ズームイン、ズームアウトボタンを表示します。
GSmallMapControlを作成し、addControlで追加します。
少し小さくてスライダーまで入らない地図におすすめです。
→サンプル

■マップ切り替えコントロールボタン
地図と衛星写真切り替えボタンを表示します
GMapTypeControlを作成し、addControlで追加します。
これで、もれなく3つのボタンが追加されます。（地図、航空写真、地図＋写真）
→サンプル

上記のコントロールボタンはGoogleのデフォルトのボタンを表示していましたが、
このボタンをカスタマイズする方法を紹介します。
ホームタウン・ホームページでは、「好きな町ランキング」で5位以内に入った町の都市ページに
小さな地図を表示していきます。
この地図のサイズが180×180（px）と小さいため、デフォルトのマップ切り替えのボタンが入りません。
そのため、小さなボタンを作成して表示しています。

■コントロールボタンのカスタマイズ
手順としては、表示したいボタンを設定してから、地図にaddControlで追加します。
例えば、航空写真への切り替えボタンを付けたい時は

下記のように、ボタンの設定をします。
var setTypePDiv = document.createElement("div");
this.setButtonStyle_(setTypePDiv);
container.appendChild(setTypePDiv);
//ボタンの名前
setTypePDiv.appendChild(document.createTextNode("写真"));
//ボタンをクリックした時の動きを設定
GEvent.addDomListener(setTypePDiv, "click", function() {
map.setMapType(G_SATELLITE_MAP);
});

その後で、ボタンのスタイルを設定します。
MapTypeSetControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline";
button.style.color = "#0000cc";
button.style.backgroundColor = "white";
button.style.font = "small Arial";
button.style.border = "1px solid black";
button.style.padding = "1px";
button.style.marginBottom = "3px";
button.style.textAlign = "center";
button.style.width = "2em";
button.style.cursor = "pointer";
}

設定したボタンを地図に追加します。
map.addControl(new MapTypeSetControl());

→サンプル

これでGoogleマップのカスタマイズについては終わりです。
GoogleAPIを使って、いろいろなマップを作ってみませんか？

Googleマップカスタマイズ2回目は、地図にマーカーを表示する方法です。

前回作成した地図（こちら）は、指定した場所が中心にあるけれど具体的にどこを指しているのかわかりません。
そこで、「マーカー」と呼ばれる印をつけることにします。

GoogleAPIではマークを付けるために「GMarker」というクラスが用意されています。

位置を渡してオブジェクトを作成し、addOverlayを使ってマーカーを表示します。

　　var point = new GLatLng(35.666623, 139.713371); //前回調べた弊社の緯度と経度
　　var marker = new GMarker(point); //マーカーオブジェクトを作成
　　map.addOverlay(marker); //マップに重ねる

これで、標準のピンクのマーカーを出すことができました。
→サンプル

次に、マーカーを自分で作成した画像に変更してみます。
GMarkerクラスのほかに、GIconクラスを使用します。
まずオブジェクトを作成します。

　　var icon = new GIcon(baseIcon);

そして、アイコンについていくつかプロパティを設定します。
最低限必要なプロパティは以下の3つです。

1. アイコンのURLを指定します。
　　icon.image = "arrow.png";

2. アイコンのサイズを指定します。
　　icon.iconSize = new GSize(83, 93);

3. 画像のどの位置を中心にするか座標を(X,Y)で指定します。
　　icon.iconAnchor = new GPoint(41, 92);

GMarkerの2項目の引数に、設定したiconを渡します。

　　var marker = new GMarker(point, icon);

そしてaddOverlayで表示します。

　　map.addOverlay(marker);

→サンプル

その他、影を付けるプロパティもあります。
Google Maps API V2のリファレンスは下記です。（英語）
http://www.google.com/apis/maps/documentation/reference.html

次回（最後）は、「地図にコントロールボタンを付ける」です。

本日から3回でGoogleマップのカスタマイズについて書きたいと思います。
1回目の今日は、マップの表示方法です。

地図を表示するために必要なことは
1. ページの文字コードがUTF-8であること
2. GoogleのAPIキーを取得すること
3. 表示したい地図の緯度と経度を知る
です。それぞれについて説明します。

1. ページの文字コードがUTF-8であること
Googleマップは文字コードがUTF-8のページで正しく表示されます。
MT3では、デフォルトの文字コードがUTF-8になっていますので、変更する必要はありません。
もし、すでにShift-JisやEUCでサイト構築をしている場合は、別のHTMLで地図ファイルを作り、
それをiframeで表示させるようにします。
その場合には、METAタグには

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

を指定してください。

2. GoogleのAPIキーを取得すること
キーとURLが一致していないと、マップを表示することができません。
下記ページ（英語）で、KEYを取得します。
http://www.google.com/apis/maps/signup.html
「Terms of Use」に同意してサイトのURLを入力し「Generate APIKey」をクリックします。
Googleにサインインしていない場合はログイン画面が出ます。アカウントを持っていなければ作成してください。

すると、次のページにAPIキーとサンプルコードが表示されます。
このコードをコピペすれば、とりあえず地図を表示することができます。

ブログに表示するには、テンプレートの中にタグ内のJavaScript部分を埋め込み、エントリー内に

<div id="map" style="width: 500px; height: 300px"></div>

のコードを書けば地図を表示することができます。

3. 表示したい地図の緯度と経度を知る
サンプルコードの中にある
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
ここで緯度と経度を指定しています。

緯度と経度を取得する方法は「Googleマップ　緯度取得」などとWeb検索すると簡単に取得できるサイトに辿り着くことができます。
ここでは、Googleサービスを使って取得する方法を紹介します。

1.まず、Googleマップサイトを表示します。
　http://maps.google.co.jp/
2.表示したい住所を入力し、「地図を検索」ボタンをクリックします。
3.希望する場所が表示されたら、右上にある「このページのリンク」という文字をクリックします。
4.ブラウザーのアドレス欄のURLが変わります。このURLを見てください。
例えば、弊社の住所を入れて「このページのリンク」をクリックすると下記のようになります。

http://maps.google.co.jp/maps?f=q&hl=ja&q=%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%B8%AF%E5
%8C%BA%E5%8C%97%E9%9D%92%E5%B1%B13-5-12&ie=UTF8&om=1&z=17&ll=35.666623,139.713371&spn=0.006302,0.011877&iwloc=addr

このll=35.666623,139.713371の青文字のところが緯度、緑文字が経度です。
これをサンプルコードに入れてあげます。

<!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key="Google APIキー" type="text/javascript"></script> <script type="text/javascript">

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.666623, 139.713371), 13);
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

これで、希望の地図を表示することができました。
ちなみに、緯度・経度の後ろの数字「13」はズームレベルです。
0（最小）〜17（最大）を選べます。
→サンプル

次回は、マーカーをカスタマイズする方法です。

ほんの10年ほど前まではホームページを作れるというだけで仕事をすることができました。 （あのころは良かった...）

・・・が、10年後の今、このブログ（MT）のような仕組みを個人で簡単に入れることができ、他にも無料で利用できるWebサービスが多く存在しています。
また、GoogleやAmazonなどが親切にも自由に利用可能なAPI（アプリケーション・プログラミング・インターフェイス、Application Programming Interface）を公開してくれたりするので、Ajaxの代名詞みたいなGoogleマップも ものの30分ほどで（使い方のレベルはさておき）誰でも自分のサイトに入れて使えちゃいます。
その上、分からないところは解説してくれるサイトまで存在しています。

そういう状況の中で、他との差別化を考えながらサイトを作っていかなくてはならないところが、これからこの仕事をしていく上で難しいところです...

Google Maps サンプル（うちの会社です）