Google Map で遊ぶ（２）：東京観光案内
昨日に引き続き、もう少し Google Map で遊んでみた。今日作ったのは、東京観光案内。独断と偏見で選んだ東京の名所１２箇所の衛星写真を、解説付きで見られるようにした。
【東京観光案内】 （←これをクリックする）
昨日のサンプルとの違いをまとめると、以下のようになる。
１．Google は東京の地図をまだサポートしていないので、最初から衛星写真モードで始まるように、map.setMapType(_SATELLITE_TYPE); という一文を入れた。この辺りに関しては、少しドキュメントが不十分だったので、フォーラムで答えを見つけた。
２．上部に行き先ボタンを表示し、onclick イベントに応じて、目的地を中心に持ってくるようにマップをスクロールさせてから、解説をポップアップさせている。
３．openInfoWindowHtml HTML テキストを渡す時に、幅を指定した DIV に入れることにより、ポップアップウィンドウの幅がやたらと広くならないようにする。
４．日本語が使えるように、encoding="UTF-8" を指定する。（この辺りは私はあまり詳しくないので、これが正しい方法かどうかは保障しない）。
５．IFRAME は使わずに、別ウィンドウで開くようにする。
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAWNM0K96_0YCXI_9uPTt1TxRvijsxwSljX33hpQXojFRGnMlGhRTxm-NwOtjyJ58FgRFM2BeGY0WYxw" type="text/javascript"></script>
</head>
<body>
<BUTTON style="width:80px; height:20px"
type="button" onclick="seeAt(139.7523, 35.6878,'皇居','天皇陛下のお住まい。徳川家康が建てた江戸城の跡地。一度だけ一周走ってみたことがあったが、次の日足が痛くて歩けなくなってしまった。',2)" >皇居</BUTTON>
<BUTTON style="width:80px; height:20px"
type="button" onclick="seeAt(139.6938, 35.6909,'新宿副都心','東京にはめずらしく、しっかりと都市計画がなされた地域。運動不足の人は住友三角ビルを階段で上まで登ってみると良い。',2)" >新宿副都心</BUTTON>
<BUTTON style="width:80px; height:20px"
type="button" onclick="seeAt(139.7966, 35.7146,'浅草浅草寺','東京に遊びに来た外国人は、ほとんどここに来る。人形焼きは焼く所をしばらく見てから食べるととてもおいしい。',1)" >浅草浅草寺</BUTTON>
<BUTTON style="width:80px; height:20px"
type="button" onclick="seeAt(139.7005, 35.6595,'渋谷','ハチ公前は待ち合わせに良く使われるが、人が多すぎるので、結局携帯電話に頼ることになる。穴場は「モアイ像」。人気が無いので、待ち合わせに便利。',1)" >渋谷</BUTTON><br/>
<BUTTON style="width:80px; height:20px"
type="button" onclick="seeAt(139.7030, 35.6715,'原宿','ここも東京に遊びに来た外国人にお勧め。特に竹下通りをコスプレで歩く少女達を見せるとうける。',0)" >原宿</BUTTON>
<BUTTON style="width:80px; height:20px"
type="button" onclick="seeAt(139.7290, 35.6606,'六本木ヒルズ','このビルには、ヤフーだとかライブドアだとか、「インターネット関連企業」が沢山入っている。「よろい」をモチーフにしているらしいが、私には「バベルの塔」に見える。',1)" >ヒルズ</BUTTON>
<BUTTON style="width:80px; height:20px"
type="button" onclick="seeAt(139.7744, 35.6267,'お台場','フジテレビができてから妙に人気が高くなった場所。当時、日本に住んでいなかったので、どうもピンと来ない。',2)" >お台場</BUTTON>
<BUTTON style="width:80px; height:20px"
type="button" onclick="seeAt(139.6950, 35.6719,'代々木公園','朝の散歩が楽しい。以前は毎朝８時になると、「犬を連れてきてはいけません」と放送があったが、誰も守らないので、最近は犬を連れてきても良いことになった。',2)" >代々木公園</BUTTON><br/>
<BUTTON style="width:80px; height:20px"
type="button" onclick="seeAt(139.6454, 35.6432,'桜小学校','私の母校。１２月と１月には、近くで有名なボロ市がある。去年、作務衣を買ったのもボロ市。',0)" >桜小学校</BUTTON>
<BUTTON style="width:80px; height:20px"
type="button" onclick="seeAt(139.6757, 35.6724,'代々木大山公園','犬の散歩に良い公園。土日は少年野球のメッカ。４月は桜が満開。',0)" >大山公園</BUTTON>
<BUTTON style="width:80px; height:20px"
type="button" onclick="seeAt(139.5993, 35.6882,'久我山','親孝行と言えば久我山。駅前にはピーコックとサミット。最近、駅が新しくなってきれいになった。',0)" >久我山</BUTTON>
<BUTTON style="width:80px; height:20px"
type="button" onclick="seeAt(139.7318, 35.6200,'森永橋','新婚時代に毎日通った橋。日曜日にはよく、長男を片手に抱えて歩いた。下を流れるのは目黒川。',0)" >森永橋</BUTTON>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.setMapType(_SATELLITE_TYPE);
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(139.6940, 35.6890), 1);
function seeAt(lat, lng, title, body, size)
{
var point = new GPoint(lat, lng);
map.centerAndZoom(point, size);
var html="<b>"+title+"</b><p><div style='width:220px'>"+body+"</div></p>";
var marker = new GMarker(point);
map.addOverlay(marker);
// Show this marker's index in the info window when it is clicked
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
marker.openInfoWindowHtml(html);
}
//]]>
</script>
</body>
</html>
すいません、MTの調子が悪く大量のTBを送信してしまいました。
邪魔でしたら、削除してください。
申し訳ありません。
Posted by: あら | 2005.07.10 at 08:10
はじめまして。
港湾マスターと申します。TBさせて頂きました。
勝手ながら公表されているサンプルコードを使って、GoogleMapsにチャレンジしてみました。
プログラミングに関してはド素人なもので真似することしか出来ませんが、こちらのブログで勉強させて頂きたいと思います。
今後ともよろしくお願いします！
Posted by: 港湾マスター | 2005.07.15 at 21:46
多分複数のところで指摘されているかも知れませんが、ギロッポンズーヒルの位置が多少間違っているようです。もう少し右下ですね。Googleの衛星写真ではまだ建築中のクレーンがみえますね。
Posted by: & | 2005.08.29 at 22:25
と思ったら、全体的に全部の地点がずれているようですね。
Google側がずらしたか？
それとも地震でずれちゃった？
まぁズームアウトすればばっちりですよ。
Posted by: ＆ | 2005.08.29 at 22:29