Google Map API で早速遊んでみた
2005.06.30
つい昨日、『私自身、もしLonghornのベータ版で遊ぶか、Googleの新しいウェブ・サービスのベータ版で遊ぶかの選択肢を迫られたら、迷うことなく後者を選ぶ』と書いたばかりだが、偶然とは恐ろしいもので、ちょうど Google が Map API のベータ版をリリースしたことを発見した。そこで早速、遊んでみた。
会社の近所の地図を表示し、そのまわりの幾つかの場所にマーカーを付け、クリックすると説明が出るようにしたのだ。もちろん、マウスで地図をドラッグしてスクロールさせることも出来るし、Satelite ボタンを押して写真に切り替えることもできる。こんなウェブ・アプリケーションが３０分ぐらい遊んだだけで出来てしまうのだから、すばらしい時代が来たものだ。
［追記］
参考までにソースコードを添付。ただし、ソースコード中の "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>
Satoshiさん、ご存知かとは思いますがGoogle Earthはかなりやばいですよ。
あっという間に時間が過ぎていきます。
これだけ豊富な画像があると交通事故の瞬間が写っているのでは？とも思ってしまいます。
Posted by: Meigara | 2005.06.30 at 21:10
Google Earth ではまだ遊んでいませんが、あれも楽しそうですね。「あっという間に時間が経つ」というのも分かります。
Posted by: satoshi | 2005.06.30 at 23:04
確かにこれは面白いですね。これは、スクリプトベースで簡単というだけでなく、サンプルが沢山提供されているという所が大きいですね。HTML が普及していった頃と似ている感じがします。
Posted by: shun | 2005.07.02 at 00:23
>HTML が普及していった頃と似ている感じがします。
確かに。９４～９５年当時を彷彿させる雰囲気のもりあがりがあります。とにかく誰でも手軽に遊んでしまえるところが良い。
Posted by: satoshi | 2005.07.02 at 06:07
すいません、MTの調子が悪く２つもTBを送信してしまいました。
邪魔でしたら、削除してください。
申し訳ありません。
Posted by: あら | 2005.07.10 at 08:11
NJ (New Jersey) transit map and driving directions to NJ transit train stations using Google maps api at http://trainsnj.com .
Posted by: seagull98 | 2005.08.17 at 19:24
サンプルを使わせていただきました。わかりやすいサンプルありがとうございます。既にGoogleMapがバージョンアップされているので、Map2に一部改良して使用しております。
旅行記ブログなどで、どこに行ったかをわかりやすく乗せられて便利ですね。
http://raleigh.sblo.jp/
Posted by: isuke | 2007.03.16 at 19:26
American Map introduces its 2007 U. S. Road Atlas in several editions, setting a“ gold standard” in the industry. The 2007 edition features unparalleled benefits and new lower pricing, according to Marc Jennings, President, The Langenscheidt Publishing Group. While most online driving directions and navigational systems cannot suggest alternate routes due to traffic, weather and construction, the 2007 U. S. Road Atlas can. “ Between gas prices, traffic snarls and obstacle- course construction, drivers need...
Posted by: mapquest | 2008.03.21 at 22:03
Hey, guy, your blog is nice. It can bring me many useful information.
Posted by: driving directions usa | 2010.04.22 at 07:16