Google Map API で早速遊んでみた
2005.06.30
つい昨日、『私自身、もしLonghornのベータ版で遊ぶか、Googleの新しいウェブ・サービスのベータ版で遊ぶかの選択肢を迫られたら、迷うことなく後者を選ぶ』と書いたばかりだが、偶然とは恐ろしいもので、ちょうど Google が Map API のベータ版をリリースしたことを発見した。そこで早速、遊んでみた。
会社の近所の地図を表示し、そのまわりの幾つかの場所にマーカーを付け、クリックすると説明が出るようにしたのだ。もちろん、マウスで地図をドラッグしてスクロールさせることも出来るし、Satelite ボタンを押して写真に切り替えることもできる。こんなウェブ・アプリケーションが30分ぐらい遊んだだけで出来てしまうのだから、すばらしい時代が来たものだ。
[追記]
参考までにソースコードを添付。ただし、ソースコード中の "key=..." は、このブログのURL用に取得した専用の Maps API key なので、自分のサイトで試す場合には、そのURL専用の key をsignup ページより取得してそれを使う必要があるので注意。
<!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>
<div id="map" style="width: 480px; height: 320px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.1960, 47.6104), 3);
// Creates a marker whose info window displays the given number
function addMarker(map, lat, lng, html) {
var point = new GPoint(lat, lng);
var marker = new GMarker(point);
// Show this marker's index in the info window when it is clicked
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
}
addMarker(map, -122.1902, 47.6039, "<b>UIEvolution Inc.</b><br/>Our Office<br/>11245 SE 6th St<br/>Bellevue, WA 98004");
addMarker(map, -122.2042, 47.6166, "<b>Bellevue Square</b><br/>Great Shopping Mall");
addMarker(map, -122.1874, 47.6107, "<b>Extended Stay</b><br/>Good hotel for peole who stay longer than a week.");
addMarker(map, -122.2005, 47.6184, "<b>Hyatt Hotel</b><br/>Upper class hotel.<br/>Great hotel for our guests.");
addMarker(map, -122.2042, 47.6166, "<b>Bellevue Square</b><br/>Great Shopping Mall");
addMarker(map, -122.1953, 47.6116, "<b>CompUSA</b><br/>A large computer retail store");
addMarker(map, -122.1998, 47.6128, "<b>Starbucks</b><br/>A nearest starbucks from our office.");
//]]>
</script>
</body>
</html>