Google アカウントは、
- 登録は無料です（アカウントを使って有料サービスにアクセスしたときには、その料金がかかります）。
- Gメールがグーグル社から自動的に届くことはありません。
- Google グループ、Froogle ショッピング リスト、パーソナライズド検索、パーソナライズド ホームページ、Google Answers などのサービスを使うことができます。もちろん、Google Mapsを使うのにも必要です。
- ユーザーネームはあなたのメールアドレスが使われます。作成後に、メールアドレスとパスワードの変更もできます。
詳しいことは、Google アカウントヘルプページを読んでください。以下に、アカウント登録・登録内容の変更の流れだけを書きます。
続きを読む "GoogleMaps活用するぞ！（2） - Google アカウント登録" »
前回でGoogle アカウントの登録について見たので、次はGoogle Maps本体への登録（サインアップ）について見ることにします。
続きを読む "GoogleMaps活用するぞ！（3） - Google Maps API への登録" »
さて、API Keyの登録に成功したならば、これから地図を組み上げていくことになります。
今後は、ｈｔｍｌタグの基本を理解していることを大前提として書いていくことにします。ゆえにｈｔｍｌタグについての解説は、いちいち行ないません。
続きを読む "GoogleMaps活用するぞ！（4） - Google Mapsを呼び出そう" »
前回取り上げた行の部分を下のように書き換えることによって、このような地図が出てきます。
| map.setCenter(new GLatLng(35.660373, +139.729260), 17);
|
続きを読む "GoogleMaps活用するぞ！（6） - 地図にコントロールを加えよう" »
「サテライト」画面でローマのバチカンを写してみました。サンピエトロ寺院の形が鮮明にわかります。
前回取り上げたAPI Documentaionに用意されている６つのコントロールの中から、上の図では以下の三つを表示してあります。
- GSmallMapControl - 小型のズームと位置移動コントロール。地図の左上に表れる。
- GScaleControl - 地図のスケール（縮尺）
- GMapTypeControl - 地図のタイプを切り替えるコントロール（地図表記、サテライト、デュアル）
続きを読む "GoogleMaps活用するぞ！（7） - 緯度経度を表示しよう" »
ページに地図を埋め込む
そろそろ文字を書き込んだりして、ページらしくしてみましょう。例として、下のようにタグを書いてみました。このタグの中の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） - マーカークリックでウィンドウを出そう" »
今回は、クリックした地点に新たにマーカーを出す（さらに、再度クリックしたときにマーカーを消す）操作について、検討します。
クリックした地点に新たにマーカーを出す
クリックした地点にマーカーを出すための基本スクリプトは、たとえば以下のとおりです。
|
GEvent.addListener(map, "click", function(任意の変数a, 任意の変数b) {
map.addOverlay(new GMarker(任意の変数b[, アイコン変数 ]))
});
|
|
続きを読む "GoogleMaps活用するぞ！（17） - クリックした地点にマーカーを出してみよう" »
今回は、showMapBlowupメソッドを使って地図入りウィンドウを出すことを、検討します。
showMapBlowupメソッド
showMapBlowupメソッドは、以下の数値を指定します。
|
showMapBlowup(緯度経度[, オプション値])
|
|
続きを読む "GoogleMaps活用するぞ！（18） - 地図入りウィンドウを出そう" »
今回は、『GOOGLE MAPS HACKS』（Rich Gibson,Schuyler Erle著、オライリージャパン）の第６章に紹介されていたテクニックを使って、インフォウィンドウの中に地図画面を埋め込むテクニックに挑戦します。Google Mapが用意するshowMapBlowupメソッドではテキストや他の画像をウィンドウ内に埋め込むことができませんが、このテクニックを使えば可能となります。だから、より一層使い勝手がよいと思います。ただし、htmlの知識に加えて、スタイルシートの知識が多少必要となります。
続きを読む "GoogleMaps活用するぞ！（19） - インフォウィンドウに地図を埋め込もう" »
前回で検討した、インフォウィンドウの中にGoogle Mapを表示する方法の中には、スタイルシートを使ってインフォウィンドウを整形するテクニックが含まれています。今回はこれをもう少し突っ込んで取り上げます。このテクニックを使えば、インフォウィンドウのオプション値を指定することなしに横幅が指定できるだけでなく、インフォウィンドウのオプション値で指定できない縦幅も指定することができます。
続きを読む "GoogleMaps活用するぞ！（20） - スタイルシート等でインフォウィンドウを整形しよう" »
Google Mapには、タブつきとタブなしのインフォウィンドウが用意されています。たとえばマーカーをクリックしたらインフォウィンドウが飛び出るように作りこめば、まずこれで一種類の情報をユーザーに渡すことができます。
さらにアイコンをカスタマイズして、情報の中身によってアイコンを変える。都合これで二種類の情報になります。しかし、まだ足りないと感じたらどうするべきでしょうか。今回以降、もう一種類情報を追加するために、例えばマウスオーバーしたときに別種の情報ウィンドウを開く方法を検討してみます。
続きを読む "GoogleMaps活用するぞ！（21） - 情報ウィンドウの数を増やそう" »
