blog:ponpon-village.net » Google

Google PC

daikisan — Mon, 09 Jan 2006 13:03:57 +0000

Google が PC を出すらしいとかいう噂が今月上旬に流れていました。
OS は Google OS だ！とか、２００ドルだとかいろいろ噂があがりました。
値段もさることながら、Google が出すってことで結構気になる情報ではありますが
胡散臭い情報でもありました。

で、結局のところ、この Google PC はどうなのかというと、
MIT（マサチューセッツ工科大）の 100 ドルPCと同じものだということが判明。
http://plusd.itmedia.co.jp/pcupdate/articles/0601/07/news015.html
http://plusd.itmedia.co.jp/pcupdate/articles/0601/07/news022.html
Google は 100 ドルPCの協賛企業だ。
このPCを世界中に配布するつもりのようだ。
まぁ、世界中っていっても、家庭にPCが普及していない国だけのようですけど。
電源は手動でゼンマイを巻いて充電するんです。
ちょっと面白そうですが、日本ではたぶん手に入ることは無いんでしょうね。
楽しみにしていた Google PC ですが、100ドルPCと同じものだったのでちょっと残念。

Google Maps API がバージョンアップしたようだ

daikisan — Tue, 06 Dec 2005 06:03:34 +0000

Google Maps API は日々改良されているのだが、
最近のバージョンアップによって、マップの座標がずれてしまった。
たぶん、緯度経度の日本測地系と世界測地系の違いによって起きたものではと推測。
違うかもしれないが。
今後も同様のズレが生じた場合の為に、
基本となる地点を用意しておき、マップの各地点座標をそこからの差で設定。
ズレが生じた場合には、基本地点の座標を修正することで
その他の地点の座標も一度に修正出来るという改善を施そうと思ったので忘れないようにメモ。

で、調べてわかったのだけど、
Google にてAPI の測地系変更がホントに行われていた。
結構前から計画されていたんですね。
１２月１日から変わってたはずなのに、さっぱり気付きませんでした・・・

ハコパンダ

daikisan — Thu, 27 Oct 2005 12:21:47 +0000

ハコパンダっていうアプリケーションというか、
サービスがあります。
Google Maps を利用したものなのだけど、
地図にブログを書けるようになっています。

サイトのデザインも結構良くて、
ライバル心みたいなのが湧き上がってきます。
ブログなので、トラックバックも出来たりします。
RSSもあるようです。
見習うべきところが多いアプリですね。
だいぶ刺激を受けました。

Google Maps API を使ってみる（４）

daikisan — Fri, 22 Jul 2005 09:01:16 +0000

またまた Google Maps API で遊んでみる。

今回は、あらかじめXMLファイルにマーカーの位置座標を入力しておき、
そのファイルを “XMLHttpRequest” で読み込んで表示してみた！

ちなみに、初心者向けに書いておくとこういうのをAjaxと呼んだりする。
私のサイトで少しだけ紹介してるので、Ajax未経験者は先に見ておくのも良いかも。
—–9/2追記——–
私のサイトで、Google Maps API のサンプル付き解説も徐々に作成・公開してます。
——————–

サンプル

すでに “XMLHttpRequest” は何度も使っていたこともあり、
非常に簡単だったので、前回・前々回のエントリーよりも先に出来ていたが、
何事も順序というものがあるわけであり、
マーカーを紹介した後に説明したかったので後回しにしました。

<br /> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><br /> <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”><br /> <head><br /> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/><br /> <style type=”text/css”><br /> v\:* {<br /> behavior:url(#default#VML);<br /> }<br /> </style><br /> <script src=”http://maps.google.com/maps?file=api&v=1&key=ここにキーを入力” type=”text/javascript”></script><br /> <script type=”text/javascript”><br /> //<![CDATA[<br /> function onLoad() {<br /> var map = new GMap(document.getElementById("map"));<br /> map.addControl(new GSmallMapControl());<br /> map.addControl(new GMapTypeControl());<br /> GEvent.addListener(map, "moveend", function() {<br /> var center = map.getCenterLatLng();<br /> var latLngStr = '(' + center.x + ', ' + center.y + ')';<br /> document.getElementById("message").innerHTML = latLngStr;<br /> });<br /> map.centerAndZoom(new GPoint(132.46151447296142, 34.39951809672059), 1);<br /> var request = GXmlHttp.create();<br /> request.open("GET", "data.xml", true);<br /> request.onreadystatechange = function() {<br /> if (request.readyState == 4) {<br /> var xmlDoc = request.responseXML;<br /> var markers = xmlDoc.documentElement.getElementsByTagName("marker");<br /> for (var i = 0; i < markers.length; i++) {<br /> var point = new GPoint(parseFloat(markers[i].getAttribute(“lng”)),<br /> parseFloat(markers[i].getAttribute(“lat”)));<br /> var marker = new GMarker(point);<br /> map.addOverlay(marker);<br /> }<br /> }<br /> }<br /> request.send(null);<br /> }<br /> //]]><br /> </script><br /> </head><br /> <body onLoad=”onLoad()”><br /> <div id=”map” style=”width: 500px; height: 400px”></div><br /> <div id=”message”></div><br /> </body><br /> </html><br />

さらに今回は、”XMLHttpRequest” で読み込む為の”data.xml”も用意します。

では、早速解説しますが、序盤はいつも通りですね。

var request = GXmlHttp.create();

以降が今回のキモです。

まず、

var request = GXmlHttp.create();

で、”XMLHttpRequest” を使えるようにし、

request.open(“GET”, “data.xml“, true);

で、読み込むファイル名 “data.xml” を指定しています。

その後の

request.onreadystatechange = function() {…}

は、読み込み始めたら・・・ってことだと思って。

if (request.readyState == 4) {…}

は、指定したファイルの読み込みが完了したら・・・という意味。

var xmlDoc = request.responseXML;

で、読み込んだファイルをXML形式として変数xmlDocに代入してる。

var markers = xmlDoc.documentElement.getElementsByTagName(“marker“);

では、読み込んだファイルの”marker”タグを取得し、

for (var i = 0; i < markers.length; i++) {…}

のようにして、”marker”タグの個数分繰り返し処理をしている。

var point = new GPoint(parseFloat(markers[i].getAttribute(“lng“)), parseFloat(markers[i].getAttribute(“lat“)));

では、”marker”タグの属性”lng”と”lat”を取得して、GPointを作成している。
そして、

var marker = new GMarker(point);
map.addOverlay(marker);

で、マーカーを作成・表示している。

表示するものをマーカーでは無くてラインにすれば線も引けるだろうし、
data.xmlファイルを書き換えるだけでマーカーの位置が変えられるので、
何かと便利に使えそうですね。

Google Maps API を使ってみる（３）

daikisan — Thu, 21 Jul 2005 08:22:45 +0000

今回は、マップのクリックした位置の拡大図表示と
クリックした位置間に線を引く
なんてことをしてみた。

今回は、クロスブラウザの問題が厄介だった。
—–9/2追記——–
私のサイトで、Google Maps API のサンプル付き解説も徐々に作成・公開してます。
——————–

サンプル

<br /> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><br /> <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”><br /> <head><br /> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/><br /> <style type=”text/css”><br /> v\:* {<br /> behavior:url(#default#VML);<br /> }<br /> </style><br /> <script src=”http://maps.google.com/maps?file=api&v=1&key=ここにキーを入力” type=”text/javascript”></script><br /> <script type=”text/javascript”><br /> //<![CDATA[<br /> function onLoad() {<br /> var map = new GMap(document.getElementById("map"));<br /> var points = [];<br /> map.addControl(new GSmallMapControl());<br /> map.addControl(new GMapTypeControl());<br /> GEvent.addListener(map, “moveend”, function() {<br /> var center = map.getCenterLatLng();<br /> var latLngStr = ‘(‘ + center.x + ‘, ‘ + center.y + ‘)’;<br /> document.getElementById(“message”).innerHTML = latLngStr;<br /> });<br /> var xpoint = new GPoint(132.46151447296142, 34.39951809672059);<br /> map.centerAndZoom(xpoint, 2);<br /> var marker = new GMarker(xpoint);<br /> map.addOverlay(marker);<br /> GEvent.addListener(map, ‘click’, function(overlay, point) {<br /> if (document.frm.op[0].checked) {<br /> window.setTimeout(function() {map.showMapBlowup(point, 0);}, 50);<br /> } else {<br /> if (points.length > 1) {<br /> points.shift();<br /> }<br /> points.push(point);<br /> map.addOverlay(new GPolyline(points));<br /> }<br /> });<br /> }<br /> //]]><br /> </script><br /> </head><br /> <body onLoad=”onLoad()”><br /> <form name=”frm”><br /> <input type=”radio” name=”op” value=”zoom” checked>拡大</input><br /> <input type=”radio” name=”op” value=”root”>道順</input><br /> </form><br /> <div id=”map” style=”width: 500px; height: 400px”></div><br /> <div id=”message”></div><br /> </body><br /> </html><br />

まずはサンプルの使い方を軽く説明しておこうかな。
画面の上にあるラジオボタンでどの機能を使うかを選択します。
「拡大」を選択しマップをクリックすると、クリックした場所の拡大図を表示します。
「道順」を選択しマップを複数箇所クリックすると、順番に線が引かれます。
以上！

では、どうやるかっていうと

GEvent.addListener(map, ‘click‘, function(overlay, point) {…}

で、マップをクリックした時に、
クリックした場所の座標( “point” )やマーカーなど( “overlay” )を取得できるので、
その時に取得したクリックした場所の座標 “point” を使用して、

map.showMapBlowup(point, 0);

とすれば、拡大図が表示されます。
“0″ はズームレベルです。
が、バグっているのか、”0″を入力しても、”1″と同じズームになります・・・
さて、firefoxでは動作しましたが、IEではここでエラーが発生しちゃいました。
どうすりゃいいんだ・・・
と、途方に暮れかけたのだけど、どうやら処理が速すぎるからってことのようだ。

というわけで、四の五の言わず、以下のようにすると問題は回避出来る。

window.setTimeout(function() {map.showMapBlowup(point, 0);}, 50);

これは、50ミリ秒後に

map.showMapBlowup(point, 0);

を実行するという意味。
50ミリ秒～100ミリ秒ほど待てばよいようなので、
各自のアプリケーションに合わせて、”50“の部分を変更して下さい。

————————–
上記の処理の速さによる問題は現在は修正されて起こらなくなりました。
————————–
説明し忘れたのだけど、

if (document.frm.op[0].checked) {…}

は、「拡大」が選択された時に、っていう意味。

「道順」では、

points.push(point);

で、 “point” を配列にして、クリック箇所の座標を覚えておいて、

map.addOverlay(new GPolyline(points));

で、先にクリックした位置と次にクリックした位置の間に線を引きます。
このままだと、どんどん配列に追加され、何度も同じ線を引いてしまい、
クリックすればするほど処理が重くなっていくので、

if (points.length > 1) {
points.shift();
}

で、２つ前にクリックした箇所の座標を削除しています。

ここでもIEではエラーが起こったのだけど、前回までのサンプルでは

だったところを、

xmlns:v=”urn:schemas-microsoft-com:vml”>

に変更し、さらに、

を追加することでエラーが起こらなくなりました。

Google Maps API を使ってみる（２）

daikisan — Tue, 19 Jul 2005 08:52:15 +0000

マップにマーカーを追加してみた。

まだまだいろんなことが出来るのですが、
ちょっとずつ公開することにしました。
—–9/2追記——–
私のサイトで、Google Maps API のサンプル付き解説も徐々に作成・公開してます。
——————–

サンプル

<br /> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><br /> <html xmlns=”http://www.w3.org/1999/xhtml”><br /> <head><br /> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/><br /> <script src=”http://maps.google.com/maps?file=api&v=1&key=ここにキーを入力” type=”text/javascript”></script><br /> <script type=”text/javascript”><br /> //<![CDATA[<br /> function onLoad() {<br /> var map = new GMap(document.getElementById("map"));<br /> map.addControl(new GSmallMapControl());<br /> map.addControl(new GMapTypeControl());<br /> GEvent.addListener(map, "moveend", function() {<br /> var center = map.getCenterLatLng();<br /> var latLngStr = '(' + center.x + ', ' + center.y + ')';<br /> document.getElementById("message").innerHTML = latLngStr;<br /> });<br /> var point = new GPoint(132.46151447296142, 34.39951809672059);<br /> map.centerAndZoom(point, 1);<br /> var marker = new GMarker(point);<br /> map.addOverlay(marker);<br /> }<br /> //]]><br /> </script><br /> </head><br /> <body onLoad=”onLoad()”><br /> <div id=”map” style=”width: 500px; height: 400px”></div><br /> <div id=”message”></div><br /> </body><br /> </html><br />

上のソースの「ここにキーを入力」の部分は、
忘れずにGoogle Maps API で取得したキーを入力してくださいね。

今回は

var point = new GPoint(132.46151447296142, 34.39951809672059);

で、マップ中心の座標を変数”point“に代入しておき、

map.centerAndZoom(point, 1);

としてみました。

さらに、

var marker = new GMarker(point);
map.addOverlay(marker);

で、同じ位置にマーカーを追加しました。

もちろん

var marker = new GMarker(point);

を、

var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059));

と書いても良いのだけども、冗長になってしまうので、
今回は変数を使ってみました。
当然のことながら、座標を変更することで、マーカーを移動させることが可能です。

マーカーは最大で１０個表示することが可能なようです。
１０個以上のポイントを表示したい場合は、別画面で・・・ということになります。
Googleローカルもそのようになっていますね。

map.addControl(new GSmallMapControl());

ですが、

map.addControl(new GLargeMapControl());

とすることで、ちょっと大きいサイズで機能も多いマップ操作機能を、

map.addControl(new GSmallZoomControl());

とすることで、ズームイン・アウトのみの最小機能のマップ操作機能を得られます。
これらは同じ位置に表示されるので、
上記３種類のうちのどれか１つを使用すればよいです。
複数使用すると、重なって表示されてしまいました。

Google Maps API を使ってみる（１）

daikisan — Sat, 16 Jul 2005 09:40:50 +0000

Google Maps の API を使ってみた。
かなり楽しい！
案外簡単だし。
どうやるかというと・・・
—–9/2追記——–
私のサイトで、Google Maps API のサンプル付き解説も徐々に作成・公開してます。
——————–

まずは、API を使う為に、キーを取得する必要があります。

キーは、登録したURLでのみ使えるようになっているので、
同じサイトでもサブフォルダでの使用はダメみたいでした。
まぁ、そのたびに新たにキーを貰えばいいのだけどね。

サンプル

上のサンプルは数分で出来ちゃいましたよ！

<br /> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><br /> <html xmlns=”http://www.w3.org/1999/xhtml”><br /> <head><br /> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/><br /> <script src=”http://maps.google.com/maps?file=api&v=1&key=ここにキーを入力” type=”text/javascript”></script><br /> <script type=”text/javascript”><br /> //<![CDATA[<br /> function onLoad() {<br /> var map = new GMap(document.getElementById("map"));<br /> map.addControl(new GSmallMapControl());<br /> map.addControl(new GMapTypeControl());<br /> GEvent.addListener(map, "moveend", function() {<br /> var center = map.getCenterLatLng();<br /> var latLngStr = '(' + center.x + ', ' + center.y + ')';<br /> document.getElementById("message").innerHTML = latLngStr;<br /> });<br /> map.centerAndZoom(new GPoint(132.46151447296142, 34.39951809672059), 1);<br /> }<br /> //]]><br /> </script><br /> </head><br /> <body onLoad=”onLoad()”><br /> <div id=”map” style=”width: 500px; height: 400px”></div><br /> <div id=”message”></div><br /> </body><br /> </html><br />

上のソースの「ここにキーを入力」の部分に、
Google Maps API で取得したキーを入力します。

サンプルではマップの下にマップ中央の座標を表示しているのだけど、
この座標を

map.centerAndZoom(new GPoint(132.46151447296142, 34.39951809672059), 1);

の赤字部分に入力してやると、マップの初期位置が変わりますよ。

map.centerAndZoom(new GPoint(132.46151447296142, 34.39951809672059), 1);

上の赤字の “1″ を変更して、2 や 4 とかにすると、マップの縮尺が変わりますよ！

最大値は試していないのでわかりません・・・
最小値は 0 かな、たぶん

map.addControl(new GSmallMapControl());

これで、マップの左上の矢印や「+」「-」が表示されるようになります。

map.addControl(new GMapTypeControl());

これで、マップの右上の「マップ」「サテライト」の切り替えが出来るボタンが表示されるようになります。

ちなみに、広島のサテライト（衛星写真）の拡大画像が無いようで、
拡大しすぎると表示されません・・・（＞＜；）

Googleローカル

daikisan — Fri, 15 Jul 2005 08:38:44 +0000

Googleが、Googleローカルっていう新しいWebアプリケーションを公開しました。
どんなものかというと、地域とキーワードを入力し検索すると、
キーワードにヒットしたお店と地図でそのお店の場所を表示するというものです。
地図にはGoogle Maps が使用されています。
このサイトを見た瞬間、ヤラレタ！と思った。

なぜなら、ほぼ同じことを考えていたから。
広島の地域情報やオススメのお店を、
Google Maps のAPIを使って公開しようと考えていたんですよねぇ・・・
あぁ～ぁ・・・
でも、ちょっと検索して、オススメのお店がヒットしなかったり、
座標がちょっとずれていたりしたので、
まだまだアリかなぁ。
近いうちにやってみることにする。
中島聡さんのブログではサンプルも紹介されていました。
非常に参考になるので一見の価値ありです。