移行することにしました。.(※1)(2013.5.1追記)2013/5/1に2013/11/19まで半年間延期のアナウンス。地図に自動的に切り替わる。移行することを強く推奨しています。2013.11.19までは表示できましたが、11.20には全て表示できなくなりました。wrapperで「大部分のシンプルな地図は表示できる」はずですが、原因は不明です。表示されるようになりました。仕様差(V2は情報ウィンドウの位置固定で拡大、V3は地図中心固定で拡大)による情報ウィンドウの配置ずれや、マーカー数が多いとラッピングにより表示に時間が掛かるなどありますが。このページのマップは、GoogleマップV2で作成したものをV3にラッピングして表示しているため、情報ウィンドウの配置が地図からはずれることがあります。はじめにGoogleマップとは、米国Google社が提供する無料地図サービスのことで、Ajax呼ばれる技術を利用して、ブラウザ上でオンライン地図を実現できるサービスです。オンライン登録を行えば、無料で使うことができ、ウェブサイト上やブログ上に簡単に世界地図を表示することができます。旅行記の訪問地紹介やラーメン店等おいしい店制覇の記録、三国志等の歴史物語合戦地の記録など、地図情報や写真・解説文付きで紹介すればより解り易くなるのではと思います。菊池さんの工作室に設置してる地図はこちら。Maps設置手順Googleアカウントの取得(持ってる方は次へ)Googleアカウントを持っていなければ、Googleアカウントページからアカウントを取得する。Googleアカウントを開設すると確認のメールが送られてくるので確認リンクをクリックして登録完了。URLを入力後、「APIキーを生成する」ボタンを押す。(注)使用するウェブサイトには「メインドメイン」を申請するとよい。メインドメインで申請すれば同じAPIキーで「サブドメイン」や「サブフォルダ」にも地図を表示できる。APIキー・設置できるURL・サンプルHTMLが表示される。サンプルHTMLをカスタマイズし、自分のサイトに設置する。サンプルHTMLコードの基本構成APIキーを取得すると、以下のサンプルHTMLが表示されます。APIページからGoogleアカウントでログインすればAPIキーとともにいつでも確認できます。Maps用プログラム。ここにカスタマイズプログラムを追加する(5):ページ読み込みが完了したら関数load()を実行、ページが閉じられるときにGUnload()を実行するコマンド(6):地図の表示位置と表示サイズの指定。最低限必要なカスタマイズサンプルHTMLを貼り付けただけの状態では、Windowsでは地図が表示されません。Mapsと異なっているからです。Mapsへ送り込まれる文字コードがutf-8なのに対して、ホームページやブログの文字コードは、Shift_JISやEUC-JPで書かれている場合が多いので表示されないということです。これを解決するには、以下の変更を行います。地図の組込み変更が完了したら、サンプルHTMLコード(2)の、[自分のAPIキー]があなたのAPIキーになってるか確認して、動作確認のため以下のどちらかの方法で、ウェブページやブログへ地図を組込みます。iframeを利用して設置するこの方法のメリットは、ページ内のインラインへフレームへ別の文書を読み込むので、異なるドキュメントタイプや文字コードでも問題ないということです。ブログではドキュメントタイプやの文字コードは自動出力になっており、ユーザーが簡単に変更できないケースも多々あるのでこの方法をお勧めします。地図を表示したい場所に以下を記述します。src="./sample.html"></iframe>ウェブページにソースコードを追加するウェブページに直接HTMLコードを組込む方法です。上記サンプルHTMLを元に組込むソースと箇所を説明します。変更後のサンプルHTMLでは、Google社発祥の地、カルフォルニア州・パロアルトの地図(右図)が表示されます。この地図が表示されれば、ウェブページやブログへの組込みは正常に完了です。Interface)とは?自分の目的に合った地図にするためには、サンプルHTMLを元にカスタマイズが必要です。APIでは、JavaScriptを使ってGoogleマップをウェブページに埋め込むことができます。地図の表示(GMap2)を始め、マップタイプ(GMapType)、地図の縮尺(GScaleControl)、コントロール(GMapControl)、マーカー(GMarker)、情報ウィンドウ(GInfoWindow)など、地図を操作したりコンテンツを地図に追加するための多数のユーティリティをAPIといいます。カスタマイズはこのAPIを活用して行います。Maps用プログラム内に、該当するAPIを追加していくことで行います。実用的な地図にするためのカスタマイズ実用的な地図にするために考えられるカスタマイズ項目には以下のものがあります。addMarker」を作成しましたのでご利用ください。addMarker文に改行が入ってますので改行を削除して1行の文になるように変更してください。改行があるとエラーになります。デフォルトの地図を「地図」のままにしたい場合は、該当する行のmap.setMapType行を削除する。GScaleControl());を削除する。GLargeMapControl());と”Small”を”Large”に変更する。”mouseover”を”click”に変更する。src=・・>の部分を削除する。マーカーを設定しない場合は、「//マーカー追加プログラム」行から「//(以降、必要なだけマーカーを追加する)」行までを削除する。マーカーのみ表示(情報ウィンドウ非表示)の場合は、マーカー追加プログラム内のGEvent.addListener行を削除し、マーカー追加記述文はaddMarker(35.658545,139.745683,"");とパラメータhtml部分を空白にする。マーカー追加プログラムaddMarkerの使用方法パラメータlat,lngにマーカーの緯度・経度、htmlに情報ウィンドウ内に表示する内容をHTML文で記述する。html内の[リンク先URL]、[画像URL]は、マーカーの実際のリンクと画像のURLに変更する。Maps用プログラム)をjsファイルとして外部ファイル化するとすっきりします。Mapsでは地図やマーカーを表示する場所を指定する際に「緯度・経度」を用います。緯度・経度の取得にはいくつか方法がありますが、(1)の方法が、住所や名前などのキーワードを入力することで、その場所の地図と緯度・経度を表示してくれるので簡単で便利と思います。(1)でヒットしない場合は(2)の方法で取得します。Geocodingを利用するGeocodingにアクセスします。位置を連想させるワードから、緯度・経度の位置情報を算出する技術です。トップページにある検索ボックスに、地図を表示したい場所のキーワードを入力します。キーワードにヒットした場所が表示されるので、その場所の緯度・経度を取得します。東京タワーの緯度・経度は画面(クリックで拡大画像)から(35.658545,139.745683)となります。Googleマップを使って取得するGooleマップで緯度・経度を取得したい地図を表示します。位置の精度を上げるため画面をさらに拡大します。調べたい場所で右クリックし「ここを地図の中心」を選択、その場所が地図の中央に来るように移動します。地図の右上にある「リンク」をクリックし、「このリンクをメールに貼り付けて地図を共有できます」の下に表示されているURLをコピーします。取得したURLの「ll=」の後に記述されている値が緯度と経度になります。下記は(2)の方法で取得した東京タワーのURLです。http://maps.google.co.jp/maps?f=q&hl=ja&geocode=&q=%E6%9D%B1%E4%BA%AC%E3%82%BF%E3%83%AF%E3%83%BC&sll=36.5626,136.362305&sspn=35.655214,51.152344&ie=UTF8&ll=35.65856,139.745423&spn=0.002114,0.003122&z=18&iwloc=A→「ll=」の後に記述されている値、(35.65856,139.745423)が求める緯度・経度になります。Tipsマーカーにはデフォルトアイコンの代わりにカスタムアイコンを定義できます。1つのアイコンは、アイコン本体の画像と影の画像から成り、アイコンのサイズGSizeと位置GPointを定義する必要があります。Finderのミニマーカーを使用してマーカー作成プログラムを作成します。以下のマーカー追加プログラムには、カスタムアイコンが必要です。同じフォルダにそのままの名前で保存します。Finderのミニマーカー1個を使用してカスタムアイコンを作成したマーカー追加プログラムです。カスタマイズ後のHTMLソースの「//マーカー追加プログラム」から「//マーカー追加」行までを入れ替えます。"blue"、"green"等利用したいカラー名に変更します。デフォルト地図を「地図」に、スケールコントローラを削除、マウスオーバーをマウスクリックに変更しています。//情報ウィンドウの位置。複数アイコンの作成とマーカー追加プログラム1つの地図の中でマーカーのサイズや色を変えて表示したい場合に使います。