バナーにメルアドを設置。各アーカイヴの右側領域をカスタマイズ。エントリーアーカイヴのコメント覧もカスタマイズした。
続きを読む "続・ブログ作り日誌 ― 物足りない。" »
昨日の晩から中古で買ってきたPCに設定を移し変える作業。SCSIボードとかタブレットとかいっぱいくっつけているし、アプリケーションもインストールし直さねばならんし、メール情報も引越し。IMEの辞書にも漢文関係ですいぶん単語登録していたから、そのファイルも移植。そんなこんなで、今ようやく一段落ついた。まだSCSIの接続がうまくいっていないが、今はスキャナーにしか使っていない状態なので、急を要さないから後回し。
続きを読む "ブログ作成日誌 ― やれやれ、、、" »
テンプレートが味気ない。ちょっとづつチューンアップしていこう。
続きを読む "ブログ作成三国志 ― 本日思いついたこと" »
はてなマップを試してみたが、、、重い！
まあ私のPCがヘタレなためであるのだろうが、自分の環境で耐えられないほど重いツールを導入するわけにはいかん。私のＰＣはそれでも全国平均クラスだろうし、できるだけ広くサイトの門戸を開いておきたい現状から言って、敬遠するしかない。
続きを読む "ブログ格闘水滸伝 ― 吉良邸の絵図面" »
グーグルが用意するJavaScriptのページから、緯度経度の表示のプログラムを引っぱってきて、カンと経験だけで埋め込んでみた。だが置きつづけるかどうかはわからない。
さらにこの項目を応用して、マーカーも埋め込むことに成功した。
ここまでは何とかなったが、次の段階のウィンドウを開くところでつまづいた。まだうまく動かん。グーグルが用意しているJavaScriptの例は「地図上にランダムでマーカーとウィンドウを埋め込む」というおよそ実用性のないものであって、そのままでは役に立たん。やはり多少はJavaScriptを調べる必要があるか。たぶんグーグル側も、プログラムも知らない奴にいじらせないために、わざとこんな実用性の無い例を置いているのではなかろうか。
続きを読む "グーグルマップ作成 ― 伊能忠敬まで一万光年" »
まずは、下にスケーラーを埋め込んだ。他にもいろいろ"control"と総称されているナビゲーションをくっつけることが可能なのだが、当面の目的に必要そうなものだけ実装。（そのうち、まとめておきます。）
続きを読む "グーグルマップ作るぞ！ ― うーむ、ひょっとして、、、" »
カレンダーの上にナビゲーションメニューを置く。頭でっかちになってしまうので、バナーの高さをカット。小さくなってしまったので、これまでトップ絵にしておいた台湾名物・愛玉冰（あいゆうびん）も外した。
続きを読む "ブログ格闘千本桜 ― Me..." »
Google アカウントは、
- 登録は無料です（アカウントを使って有料サービスにアクセスしたときには、その料金がかかります）。
- Gメールがグーグル社から自動的に届くことはありません。
- Google グループ、Froogle ショッピング リスト、パーソナライズド検索、パーソナライズド ホームページ、Google Answers などのサービスを使うことができます。もちろん、Google Mapsを使うのにも必要です。
- ユーザーネームはあなたのメールアドレスが使われます。作成後に、メールアドレスとパスワードの変更もできます。
詳しいことは、Google アカウントヘルプページを読んでください。以下に、アカウント登録・登録内容の変更の流れだけを書きます。
続きを読む "GoogleMaps活用するぞ！（2） - Google アカウント登録" »
さて、API Keyの登録に成功したならば、これから地図を組み上げていくことになります。
今後は、ｈｔｍｌタグの基本を理解していることを大前提として書いていくことにします。ゆえにｈｔｍｌタグについての解説は、いちいち行ないません。
続きを読む "GoogleMaps活用するぞ！（4） - Google Mapsを呼び出そう" »
前回取り上げた行の部分を下のように書き換えることによって、このような地図が出てきます。
| map.setCenter(new GLatLng(35.660373, +139.729260), 17);
|
続きを読む "GoogleMaps活用するぞ！（6） - 地図にコントロールを加えよう" »
「サテライト」画面でローマのバチカンを写してみました。サンピエトロ寺院の形が鮮明にわかります。
前回取り上げたAPI Documentaionに用意されている６つのコントロールの中から、上の図では以下の三つを表示してあります。
- GSmallMapControl - 小型のズームと位置移動コントロール。地図の左上に表れる。
- GScaleControl - 地図のスケール（縮尺）
- GMapTypeControl - 地図のタイプを切り替えるコントロール（地図表記、サテライト、デュアル）
続きを読む "GoogleMaps活用するぞ！（7） - 緯度経度を表示しよう" »
タイトル：Speed improvements, custom cursors, & geocoder updates
APIBlogの06/07/21更新分について、要点を書いておきます。
続きを読む "GoogleAPIBlog 06/07/21更新" »
ページに地図を埋め込む
そろそろ文字を書き込んだりして、ページらしくしてみましょう。例として、下のようにタグを書いてみました。このタグの中のGoogle Mapsには、以下の機能を付けています。
- GLargeMapControl（大型のズームと位置移動コントロール）、GScaleControl（地図のスケール）、GMapTypeControl（地図のタイプを切り替えるコントロール）の三つのコントロールを付けています。（赤字の部分）
- 横の長さ500ピクセル、縦の長さ500ピクセル。
- 緯度経度を下に表示しています。（紫字の部分）
- 中心位置はサンフランシスコ、アルカトラズ島。ズームは１６段階。
ページらしくするために今回付け加えた部分は、緑色で示しています。
続きを読む "GoogleMaps活用するぞ！（8） - そろそろページらしくしてみよう" »
Google Mapsは地図上に自由に表示できるアイテムとして、マーカーとポリライン（直線）とウィンドウが用意されています。この三つを組み合わせれば、多彩なデータベースを作ることができるでしょう。まずは、マーカーから見ていきましょう。
続きを読む "GoogleMaps活用するぞ！（9） - マーカーを打ってみよう" »
Google Mapsデフォルトのマーカーでも、十分役に立てることができす。しかし一種類しかありません。もっとマーカーの色や形をいろいろ変えて分かりやすくしたいと考えるのは、人情というものでしょう。今回は、自分でカスタマイズしたマーカーを用意して地図上に表現することを試みます。
続きを読む "GoogleMaps活用するぞ！（10） - マーカーを変えてみよう" »
前回の例では、Google Ride FinderのアイコンをGoogleサイトから読み出して、表示しました。これを自分のサイトから自作のアイコンを読み出すように、設定を変更すればよいのです。
以下の例では、サイト内の同じフォルダに地図ページとアイコンファイルを置いて設計しています。つまり、[map]というディレクトリ＝フォルダでAPI Keyを登録したとすれば、
| [map] - | maptest01.html ----->Google Mapsを埋め込んだ地図ファイル |
| hide.png ----->自作のアイコンファイルその１ |
| mitsu.png ----->自作のアイコンファイルその２ |
というファイル構成で設計しています。
続きを読む "GoogleMaps活用するぞ！（11） - 自作のマーカーを置いてみよう" »
Google Mapsが用意するポリラインは、次々に各点を指定することによって多角形を地図上に書くことができます。色や太さ、不透明度も指定することができます。
ポリラインの使う際の注意
インタネットエクスプローラでポリラインを表示する場合には、ページの冒頭に下の赤字の部分を追加しなければならないようです。
|
<!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"
xmlns:v="urn:schemas-microsoft-com:vml">
|
|
Google Maps API Documentationの"XHTML and VML"の項目では、違うことが書かれています。しかし、私が試してみた限り、上の指定で十分なようです。
続きを読む "GoogleMaps活用するぞ！（12） - ポリラインをひこう" »
今回から、インフォウインドウについて見ていくことにします。
インフォウインドウ（タブなし）を開く基本スクリプト
まず最初に、最もシンプルなタブなしのインフォウィンドウの開き方について見ます。
Google Mapsには、openInfoWindowとopenInfoWindowHtmlの二種類のメソッドが用意されています。
openInfoWindowは、DOM（Document Object Model）ノード形式でウィンドウ内の情報を記入するためのメソッドです。
一方、openInfoWindowHtmlは、html形式でウィンドウ内の情報を記入するためのメソッドです。
これまでの例と同じく、最初に定義する地図を描くための変数を"map"とすると、それぞれを用いてウィンドウを表示するスクリプトは、以下のとおりです。
|
var 変数 = new GLatLng( 緯度 , 経度 );
map.openInfoWindow(変数, DOMノード[, オプション値]) ;
var 変数 = new GLatLng( 緯度 , 経度 );
map.openInfoWindowHtml(変数, html文[, オプション値]) ;
|
|
続きを読む "GoogleMaps活用するぞ！（13） - インフォウィンドウを開こう" »
前回は、一枚ページのインフォウインドウの開き方を見ました。今回は、タブのついたインフォウインドウを見ます。
前回に引き続いて、タブインフォウインドウについても、もっぱらhtmlを用いるopenInfoWindowTabsHtmlメソッドだけに集中して検討します。
続きを読む "GoogleMaps活用するぞ！（14） - タブインフォウィンドウを開こう" »
今回は、Google Mapsをデータベースとして設計する際に最も基本的な、マーカークリックによるウィンドウ表示を検討します。個人のホームページのレベルならば、これとコントローラーだけでも内容次第によってはGoogle Mapsで十分高度なものが作れるでしょう。
続きを読む "GoogleMaps活用するぞ！（15） - マーカークリックでウィンドウを出そう" »
タイトル：Revision 2.60 of API v2
APIBlogの06/08/01更新分について、要点を書いておきます。
続きを読む "GoogleAPIBlog 06/08/01更新" »
今回は、クリックした地点に新たにマーカーを出す（さらに、再度クリックしたときにマーカーを消す）操作について、検討します。
クリックした地点に新たにマーカーを出す
クリックした地点にマーカーを出すための基本スクリプトは、たとえば以下のとおりです。
|
GEvent.addListener(map, "click", function(任意の変数a, 任意の変数b) {
map.addOverlay(new GMarker(任意の変数b[, アイコン変数 ]))
});
|
|
続きを読む "GoogleMaps活用するぞ！（17） - クリックした地点にマーカーを出してみよう" »
今回は、showMapBlowupメソッドを使って地図入りウィンドウを出すことを、検討します。
showMapBlowupメソッド
showMapBlowupメソッドは、以下の数値を指定します。
|
showMapBlowup(緯度経度[, オプション値])
|
|
続きを読む "GoogleMaps活用するぞ！（18） - 地図入りウィンドウを出そう" »
タイトル：Draggable Markers and GTileLayerOverlays
APIBlogの06/08/10更新分について、要点を書いておきます。
続きを読む "GoogleAPIBlog 06/08/10更新" »
今回は、『GOOGLE MAPS HACKS』（Rich Gibson,Schuyler Erle著、オライリージャパン）の第６章に紹介されていたテクニックを使って、インフォウィンドウの中に地図画面を埋め込むテクニックに挑戦します。Google Mapが用意するshowMapBlowupメソッドではテキストや他の画像をウィンドウ内に埋め込むことができませんが、このテクニックを使えば可能となります。だから、より一層使い勝手がよいと思います。ただし、htmlの知識に加えて、スタイルシートの知識が多少必要となります。
続きを読む "GoogleMaps活用するぞ！（19） - インフォウィンドウに地図を埋め込もう" »
前回で検討した、インフォウィンドウの中にGoogle Mapを表示する方法の中には、スタイルシートを使ってインフォウィンドウを整形するテクニックが含まれています。今回はこれをもう少し突っ込んで取り上げます。このテクニックを使えば、インフォウィンドウのオプション値を指定することなしに横幅が指定できるだけでなく、インフォウィンドウのオプション値で指定できない縦幅も指定することができます。
続きを読む "GoogleMaps活用するぞ！（20） - スタイルシート等でインフォウィンドウを整形しよう" »
Google Mapには、タブつきとタブなしのインフォウィンドウが用意されています。たとえばマーカーをクリックしたらインフォウィンドウが飛び出るように作りこめば、まずこれで一種類の情報をユーザーに渡すことができます。
さらにアイコンをカスタマイズして、情報の中身によってアイコンを変える。都合これで二種類の情報になります。しかし、まだ足りないと感じたらどうするべきでしょうか。今回以降、もう一種類情報を追加するために、例えばマウスオーバーしたときに別種の情報ウィンドウを開く方法を検討してみます。
続きを読む "GoogleMaps活用するぞ！（21） - 情報ウィンドウの数を増やそう" »
