« 木の葉の通り抜け - 青蓮院 | メイン | スイレンとアオイ - 知恩院 »

グーグルマップ作るぞ! ― うーむ、ひょっとして、、、

(カテゴリ:ブログ作るぞ!

まずは、下にスケーラーを埋め込んだ。他にもいろいろ"control"と総称されているナビゲーションをくっつけることが可能なのだが、当面の目的に必要そうなものだけ実装。(そのうち、まとめておきます。)

さて、問題のウインドウだ。グーグルのAPI解説ページを読んでいくと、どうやら変数varを宣言して、関数functionを組み立てることがプログラミングの要のようだ。というわけで、ウィンドウを開くためのメソッドである"openInfoWindowHtml"でYahoo!検索してみる。ぞろぞろ英文のページが出てきた中から、なんとなく文法を書いてそうなプログラミング例を眺めながら、しばし黙考、、、、そうか!openInfoWindowHtml()のカッコ内は変数処理されるHTML文書で、別のところで変数としてHTMLの内容を定義すればよいのか。そしてクリックすればウィンドウが開く構造は、「GEvent.addListener(対象のマーカーを、クリックすれば、この関数を走らせよ)」の構文が担当していて、その関数の中にopenInfoWindowHtmlメソッドを組み込む形になるわけなんだな?

このカンに従って作業、、、開いた!よーし、My aim is true。だが文字化けしている、、、吼喔喔!なんで北東アジア社会はこんなふうに米さんのプログラムを使ったら文字化けに苦しまなけりゃならないんだ!まあ歎いていても仕様がない。これまでフリーソフトのazuki maker を使っていたが、この時点からグーグルが読み込むことができるというUTF-8へのコード変換ができる、サクラエディタで編集することにした。

そんなこんなで、画像とエントリーへのリンクも置いたウィンドウを開かせるところまでこぎつけた!うーん、グーグルマップを導入してから3日、それでここまでたどり着いたというのは、ひょっとしてちょっと大したものではないか?

まあしょうもない自己満足は一銭の金にもならんから、やめにしよう。

というわけで、現在グーグルマップを埋め込んでいるページには、このように書いている(例。サイトのURLは"http://suzumoto.com/"として、エントリーと画像のURLは適当に作った)

var point = new GLatLng(35.0071, +135.7826); //マーカー等の位置を変数"point"で指定
var marker = new GMarker(point); //変数"marker"で指定の位置にマーカーを用意
var html= '[ウィンドウの内容]'//変数"html"でウィンドウ内のHTMLを指定
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
}); //GEvent.addListenerで、クリックした時の動作を指定
map.addOverlay(marker);//マーカーを地図上に置く