Ad Network

あわせて読みたい

  • あわせて読みたい

« アルファギークはLonghornの夢を見るか? | Main | TVの壁掛け工事にチャレンジ »

Google Map API で早速遊んでみた

 つい昨日、『私自身、もし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>

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4f9853ef00d834585ebd69e2

Listed below are links to weblogs that reference Google Map API で早速遊んでみた:

» 地図サービスのAPI公開 from 日々のBlog
地図サービスのGoogle MapsやYahoo MapsのAPIが公開された記事をCNETで見つけた。そこで、いろいろと検索してみると、既に実験をおこなっているサイト(Life is beautiful)もあり、確かに面白い技... [Read More]

» USA と from forestone
USA と Google API [Read More]

» クリッピングいくつか from 外部記憶
最近知ったニュース、サイトなどのメモ。 意図したわけではないのだが、何故かGo... [Read More]

» [プログラミング] やっぱボクはアルファギークスじゃないんだな from Guitarist's Paperplane
 Life is Beautifulというブログで,Google Map API で早速遊んでみたというエントリを見かけ,ボクも真似してみようと思ったりしたのだった。  もちろんボクは米国在住じゃないので,東京で。こちらはMapがないから衛星写真だな…。そして,うん。ギターショップでも乗っ... [Read More]

» World Heritage Virtual Flightseeing from Digital Life Innovator
東京ロケ地図のインタフェースを流用して、世界遺産の観光地図を作成しました。 こち... [Read More]

» 続google map from + ひとりよがり +
google map APIは、すごーーーーーーーーーーーい これを使って、色々... [Read More]

» 続google map from + ひとりよがり +
google map APIは、すごーーーーーーーーーーーい これを使って、色々... [Read More]

» 2005/07/12:認知症をだます、各社APIを続々公開、地図サービスほか from ニュースWatch
CNET Japan Blog - 江島健太郎 / Kenns Clairvoyance:社内ブログ導入記(1)~http://blog.japan.cnet.com/kenn/archives/002189.html>社内ブログはいいこことだライフス... [Read More]

» 続々とBETA版が・・・Yahoo!SEARCHとGoogleMapとGmail from 天下一ケンチクンへの挑戦  err
ケンチクヤロウのnmarch さんにトラックバック。 google earth  なんてあったんですね・・・ こんな感じ。 簡単に拡大縮小、左右上下に動いてちょっとカンゲキ♪ ってかんじで面白かったです。 早々、最近β版が色々出ていますねーちょっと興味津々 一緒に... [Read More]

» 続google map from + ひとりよがり +
google map APIは、すごーーーーーーーーーーーい これを使って、色々... [Read More]

» Google Maps API テストページ設置 from 管理人ブログ - wildcatさんのブログ - at SeaLandAir.info
Google Maps API を用いてテストページを設置し、地図を表示してみました。http://sealandair.info/xoops/modules/tinyd2/index.php?id=5まだ、羽田空港へのリンク一つだけだけど。 このページhttp://www.movies.ne.jp/theatermap/tokyo/みたいな空港リンク集が出来たら良いな。座標の入力がなかなか面倒くさい。緯度・経度を小終点以下5桁くらいまで入れないと、表示がずれてしまうみたいだが、どうやって地図から... [Read More]

» Topページ Google Maps化計画!! from 批評.com
最近、熱いGoogle Maps APIが公表され、無料で利用できるようになったので、TOPページに地図を表示してみました。 JavaScriptでここまでできるとはさすがGoogle。 APIは簡単なドキュメントしか無いですが理解しやすく、 JavaScriptを書いている気がしないです。 A...... [Read More]

» Topページ Google Maps化計画!! from 批評.com
最近、熱いGoogle Maps APIが公表され、無料で利用できるようになったので、TOPページに地図を表示してみました。 JavaScriptでここまでできるとはさすがGoogle。 APIは簡単なドキュメントしか無いですが理解しやすく、 JavaScriptを書いている気がしないです。 A...... [Read More]

» 神楽坂 食べ歩きマップ from くいしんぼう Blog
「Life is beautiful:Google Map API で早速遊んでみた」を参考にさせていただき、神楽坂の食べ歩きマップを作ってみました。 [Read More]

» google maps from PukiWiki/TrackBack 0.2
google maps api GoogleMapsEditor † GoogleMapsAPIを利用した地図コンテンツをプログラムなしで作成できる編集ソフト  http://hsj.jp/gme/ ↑Google Map API で早速遊んでみた † http://satoshi.blogs.com/life/2005/06/google_map_api_.html [Read More]

» Google Maps APIで遊んでみました from m x g
前から、 お気に入りの店をDoCoMoのiエリア使って近い順に並べる・・・ ジャンルや店名で検索・・・ なんかしてグルメを育ててましたよ。 それをGoogle Maps API使って、もう少し便利にしてみました! http://mxo.k1.xrea.com/gourmet_gmap/select_g_gmap.php MySQLに当たって店情報とってきて、 Google Maps表示させて、 お店のマークをつけて、詳細情報とコメントをバルーンに入れて。 こんな感じ。 便利! さらにこれが携帯から... [Read More]

» Topページ Google Maps化計画!! from 批評.com
最近、熱いGoogle Maps APIが公表され、無料で利用できるようになったので、TOPページに地図を表示してみました。 JavaScriptでここまでできるとはさすがGoogle。 APIは簡単なドキュメントしか無いですが理解しやすく、 JavaScriptを書いている気がしないです。 A...... [Read More]

» Topページ Google Maps化計画!! from 批評.com
最近、熱いGoogle Maps APIが公表され、無料で利用できるようになったので、TOPページに地図を表示してみました。 JavaScriptでここまでできるとはさすがGoogle。 APIは簡単なドキュメントしか無いですが理解しやすく、 JavaScriptを書いている気がしないです。 A...... [Read More]

» [╗и╡н] GoogleMap е▐е╕ефе╨ед(2) from дкддд╟д▐дд д╓дэд░
GoogleMap д▐д╕дфд╨ддбгд│дьбв└ф┬╨е╓б╝ерд╦д╩дыдшбг д╚дддждяд▒д╟╞░╕■─┤║║дтдлд═д╞дддэдддэ GoogleMap д╦┤╪д╣дые╡еде╚дЄ╜жд├д╞днд▐д╖д┐бг╕лд┐д│д╚д╩дд┐═дтбв╢╜╠гдмдвды┐═дт╕лд╞д▀д╞дпд└д╡ддбгд╧д▐дыдлдтдшбй вгвг ╝┬║▌д╦╞░дп GoogleMap б√ ┴┤╣ёеэе▒├╧┐▐ ║гд╬д╚д│дэ░ь╚╓дкдтд╖дэдд GoogleMap е╡еде╚бг╣еднд╩е╔еще▐дф▒╟▓ш(╦о▓ш)д╬еэе▒├╧дм└т╠└дф╝╠┐┐д╚д╚дтд╦д▀дьд▐д╣бг╞├╗гете╬д╬▓╛╠╠ещеде└б╝╢┴╡... [Read More]

» google Earth の正しい使い方。 from mediologic.com/weblog
突然ですが、黒鯛は日本中至るところにいる魚で、かつそんなにバカスカ釣れるもんでも... [Read More]

» GoogleMapAPIで自分の現在置を地図にマッピング from Yoichi Kawasaki Weblog
以前Google Mapに関しての日記を投稿したが、今度はLife is beautifulの記事に刺激を受け、自分もMap API のベータ版を利用して、その地図データで遊んでみた。前から自分がやっ... [Read More]

» Google MAP API を使って遊んでみた from Like a Salmon - MBA Life in UW Seattle -
やっと土曜日となり、週の疲れを癒すべく9時間ほど爆睡。やはり疲れてるんですね… リフレッシュのために家族でお買い物に。まずは昼飯を3Pigsという店でTakeout。BBQソースが評判でマリナーズのエドガー選手もよく来るとの情報があったのですが、頼んだメニューが悪かったのか大したことないような…今度はハンバーガーを頼みます。 次は釣具やへ移動。先日のダウンリガーでの坊主の雪辱を晴らすべく、今度は川へと繰り出そ... [Read More]

» Google Maps API関連 from 快適チョメチョメ講座
プログラムの知識などはないので、いちいち感心しているばかりです。 Google ... [Read More]

» Google Analyticsの訪問数データをGoogle Mapsに表示 from しげふみメモ
Google Analytics で、マーケティングの最適化→訪問ユーザー セグメントのパフォーマンス→地図上のデータ表示 とすれば、 世界地図上で各地域の訪問ユーザー数を確認できます。 このBlogを世界のいろんなところから見に来ているとわかると、とても楽しくなります。 ふ....... [Read More]

» Google Maps APIでちょちょっと from のんびりプログラミング日記。
会社の方に「GoogleMapsって、ちょちょっとやったらできるの?」(原文ママ)と軽く言われ、必死に調べて作ってみました。いや、便利な技術ですね。「Ajax」という、JavaScriptとXMLとサーバーサイドアプリケーションを融合させた技術?で作られているみたいです。もっとも...... [Read More]

» Google Map APIで記事と地図を連動させてみた from BlogAndows::つれづれ創太
GoogleMapで何かできないかなぁと検索していたら Life is beau... [Read More]

» Google Map APIで記事と地図を連動させてみた from BlogAndows::つれづれ創太
GoogleMapで何かできないかなぁと検索していたら Life is beau... [Read More]

» Google Map API〜♪ from Gebsite.org
Life is BeautifulさんやPebble JPさんを参考にちょっと触... [Read More]

» Google Map API を勉強しましょう - まずは情報の収集から from いまどきのフリーなおじさんプログラマー
Ajaxの代名詞、Google Map が自分のサイトに設置できると知り、勉強してみました。まずは、Google Map API関連の情報収集から。 Google 関連Google ローカルGoogle Map の日本サイトです。Google Map API(英語)Google Map API のサイトです。Google Maps API keyの取得もできます。Google Earth(英語)Google Earth のダウンロードサイトです。真っ先に自分家を探しちゃいました。感動もんです。... [Read More]

» Google Map APIで記事と地図を連動させてみた from BlogAndows::つれづれ創太
GoogleMapで何かできないかなぁと検索していたら Life is beau... [Read More]

» penfactory.net 地球案内#google mapってこう使うんだぁ# from penfactory.net
Google Earthを持て余してる。 とりあえず、Google Mapから攻... [Read More]

» penfactory.net 地球案内#google mapってこう使うんだぁ# from penfactory.net
Google Earthを持て余してる。 とりあえず、Google Mapから攻... [Read More]

» penfactory.net 地球案内#google mapってこう使うんだぁ# from penfactory.net
Google Earthを持て余してる。 とりあえず、Google Mapから攻... [Read More]

» Google Mapsをサイトに埋め込む方法 from One's best!
Google Maps 昨年話題になったGoogleが提供している無料サービスだが、 下記のサイトでとても丁寧に解説されている。 まだGoogle Mapsを試してない方は、是非一度設置してみては?^^ Google Mapsを自サイトに設置する Google Map API で早速遊んでみた Google Maps API解説... [Read More]

» Google Mapsをサイトに埋め込む方法 from One's best!
Google Maps 昨年話題になったGoogleが提供している無料サービスだが、 下記のサイトでとても丁寧に解説されている。 まだGoogle Mapsを試してない方は、是非一度設置してみては?^^ Google Mapsを自サイトに設置する Google Map API で早速遊んでみた Google Maps API解説... [Read More]

» Google、WEBベースの表計算ソフトをテストリリース from うい〜
Googleより、WEBベースの表計算ソフト「Google Spreadsheet」が 登場の模様。 ネットにさえ繋がれば、各自のPCにソフトが無くても使用できるわけだ。 Googleはネット上に、Microsoftは各PC上に。ってな感じ。 ・ウェブベースの表計算プログラム「Google Spreadsheet」....... [Read More]

» Re: Life is beautiful: Google Map API で早速遊んでみた from GochaBookMarkClips
Life is beautiful: Google Map API で早速遊んでみたあんまり使えないネタ。一応保存。。。 [Read More]

Comments

Meigara

Satoshiさん、ご存知かとは思いますがGoogle Earthはかなりやばいですよ。
あっという間に時間が過ぎていきます。
これだけ豊富な画像があると交通事故の瞬間が写っているのでは?とも思ってしまいます。

satoshi

Google Earth ではまだ遊んでいませんが、あれも楽しそうですね。「あっという間に時間が経つ」というのも分かります。

shun

確かにこれは面白いですね。これは、スクリプトベースで簡単というだけでなく、サンプルが沢山提供されているという所が大きいですね。HTML が普及していった頃と似ている感じがします。

satoshi

>HTML が普及していった頃と似ている感じがします。

確かに。94~95年当時を彷彿させる雰囲気のもりあがりがあります。とにかく誰でも手軽に遊んでしまえるところが良い。

あら

すいません、MTの調子が悪く2つもTBを送信してしまいました。
邪魔でしたら、削除してください。
申し訳ありません。

seagull98

NJ (New Jersey) transit map and driving directions to NJ transit train stations using Google maps api at http://trainsnj.com .

isuke

サンプルを使わせていただきました。わかりやすいサンプルありがとうございます。既にGoogleMapがバージョンアップされているので、Map2に一部改良して使用しております。

旅行記ブログなどで、どこに行ったかをわかりやすく乗せられて便利ですね。
http://raleigh.sblo.jp/

mapquest

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...

driving directions usa

Hey, guy, your blog is nice. It can bring me many useful information.

Post a comment

This weblog only allows comments from registered users. To comment, please Sign In.