Google マップを活用しよう！
Google マップ
地域情報や地図の検索がより簡単、便利になりました。 Google マップでは、指定した地域のお店やサービスなどを検索したり、目的場所の地図やその付近の様子を確認することができます。〔 Google マップ 〕
Google マップとは、無料の Web 地図ソフトです。目的場所の住所を入力して地図やその付近の様子をズームなどを利用して詳細に確認することができます。
ソフトと言ってもインストールなどは必要なく、Web 上で動作して利用することができます。
Google マップは、ただの地図ソフトとは違い、衛星写真や航空写真の実際の画像で地図を閲覧することができます。表示速度も速く、ドラッグで簡単に地図を移動でき拡大縮小もスムーズです。
| サンプル （ 地図 ） 銀座駅 | サンプル （ サテライト ） 銀座駅 |
 |
 |
「 マッシュアップ 」 というのをご存知でしょうか。現在あるサービス、つまり既存のサービスやデータなどを再利用して提供しているサービスを「 マッシュアップ 」 と言うそうです。
これらのサービスやデータをユーザーが利用してマッシュアップを作成できるように API を公開するサイトが増えてきています。その代表ともなるサイトが Google で、 YAHOO! やアマゾンなども API を公開しています。
API とは、あるプラットフォーム(OSやミドルウェア)向けのソフトウェアを開発する際に使用できる命令や関数の集合のこと。また、それらを利用するためのプログラム上の手続きを定めた規約の集合。個々のソフトウェアの開発者がソフトウェアの持つすべての機能をプログラミングするのは困難で無駄が多いため、多くのソフトウェアが共通して利用する機能は、OSやミドルウェアなどの形でまとめて提供されている。個々の開発者は規約に従ってその機能を「呼び出す」だけで、自分でプログラミングすることなくその機能を利用したソフトウェアを作成することができる。〔 IT用語辞典 e-Words 〕
つまり、ソフトウェアの開発者が一からすべてを開発せずに、ソフトウェアが共通して利用する機能は呼び出すだけで利用してソフトウェアを開発することができるというものです。
これにより、ソフトウェアで共通する部分に手間をかけずに済みます。
マッシュアップで代表的なのは、Google マップを利用したマッシュアップで、飲食店などが地図と情報を組み合わせて利用していることが多いですね。
Google で公開されている API を利用することで自分専用の地図を作成できますが、プログラミングなどの知識が必要でちょっと敷居が高いです。ですが、無料のソフトを利用して簡単に地図を作成することが可能になります。
Google Maps API は JavaScript を用いてアクセスするので、 CGI や PHP は必要ありません。無料のブログなどにも設置することが可能なので利用用途はさまざまです。
Google マップを自分のホームページやブログなどで利用するには、Google のアカウントを取得しましょう。
Google アカウントは、https://www.google.co.jp/accounts/NewAccount で取得することができます。
また、自分のサイトでGoogle マップを利用するには 「 Google Maps API Key 」 を取得します。この Key がないと、自分のページで Google Maps API を利用することができません。
API Key の取得
まず、https://www.google.com/accounts/ でログインします。
ログインした状態で、Google Maps API のページ http://www.google.com/apis/maps/ を開きます。
「 Sign up for a Google Maps API key 」 というリンクをクリックします。
 |
ページの下部に自分のサイトのURLを記入して 「 Generate API Key 」 というボタンを押して Key を取得します。
 |
一番上の文字列が API Key です。この Key がないと、自分のページで Google Maps API を利用することができませんので、コピーしてメモ帳などに保存しておきましょう。
正常にキーの取得が出来ているかどうかは、下部に書かれているコードをHTＭＬファイルにコピーし、アップロードして確認してください。
このサンプルページのように、Googleマップが表示されていれば、取得は成功です。
 |
上記のサンプルコードを書き換えることで、以下のような地図を表示させることもできます。マーカーを挿入したり、ふきだしにコメントを挿入することもできます。また、マーカーにリンク先を設定することもできます。
API を利用して自分で地図をカスタマイズする場合、Google Maps API は JavaScript で記述されているので、JavaScript が記述できなければなりません。
API キーを取得すれば、無料のカスタマイズソフトなどがありますので、それらを利用すると簡単に自分の地図を作成できるのでおすすめです。
また、コンテンツ内で Google Maps API を使う場合は文字コードを UTF-8 で作成しなければなりません。ほとんどの方が Shift_JIS でページを作成していると思います。
Shift_JISで作成したページ内やブログなどに Google Maps を表示したい場合は、ページ下部の ロカポ ＤＩＹマップ や GMapCreator を使えば、Google マップを簡単に作成し、表示することができます。
Google Maps簡単作成ツール ： GMapCreator
GMapCreator は、Javascript などが全くわからない方でも Web 上で簡単に Google マップを作成し、自分のブログやホームページに貼り付けることができるツールです。
API キーを取得していれば簡単に地図を作成することができます。
Geekなぺーじ 様の Google Maps簡単作成ツール：GMapCreator を利用して地図を作成します。
まず、Google Maps簡単作成ツール：GMapCreator のページで地図が表示されています。
地図上部の 「 初期画面 」 にカーソルを重ねてメニューを表示させ、 「 Google Maps API Key 」 をクリックします。
 |
あなたが取得した API キーをペーストして 「 OK 」 をクリックします。
 |
次に、 「 コントロール 」 より 「 全部入り 」 をクリックします。
 |
左上にコントローラーが表示されるので、地図を作成したい場所を表示させます。矢印キーで移動するか、直接地図をドラッグして移動。 「 ＋ 」 「 − 」 キーで拡大・縮小を調節します。
 |
地図上でクリックして 「 マーカーを追加 」 をクリックすれば好きな位置にマーカーを表示させることができます。
 |
マーカーをクリックするとコメントを挿入したり、リンクやタイトルを挿入することもできます。
 |
マーカーにふきだしを設定できます。コメントを記入して「 OK 」をクリック。
 |
マーカーにカーソルを重ねたときに表示されるタイトルを記入します。
 |
マーカーをクリックしたときのリンク先を設定できます。
 |
カスタマイズを完了したら 「 コード生成 」 をクリックします。
 |
「 コード生成 」 をクリックするとコードが生成されます。
上の欄はコンテンツ内に IFRAME を使って表示させる場合に、このコードをページにペーストします。下の欄は Google マップの HTMLコードです。
 |
IFRAME を使って表示させる場合は、上欄のコードを表示させたいページにペーストします。IFRAME 内に表示させる地図を下欄のコードをコピーして HTML を作成します。
この HTMLページ は文字コード 「 UTF-8 」 で作成します。
作成した HTML の HEAD 内のメタタグが以下のように 「 UTF-8 」 になっていることを確認しましょう。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
ホームページビルダーを使用している方は、ソフトの設定によっては自動で文字コードが Shift_JIS に変更されてしまうことがあるので注意してください。
ホームページビルダー設定例
「 ツール 」 → 「 オプション 」 とたどり、「 ファイル 」 タブにて 「 出力漢字コード（O）: 」 をプルダウンから Unicode (UTF-8) に設定。
 |
下欄のコピーで作成した HTML のファイル名を google_maps とした場合、IFRAME で呼び出すアドレス src=" " にファイル名の google_maps.html を記述します。
例： <iframe src="google_maps.html" width="500" height="500" scrolling="NO" frameborder="0"></iframe>
表示させる地図の大きさは、IFRAME タグと HTML 内の
width="500" height="500" の数字の部分を変更するだけです。
例：
IFRAME 内 width="300" height="300"
HTML 内 width:300px; height:300px;
ロカポ ＤＩＹマップ
ロカポ ＤＩＹマップを使えば、Google マップに自由に線を引いたり、マーカーを配置したり自分専用の Google マップを簡単に作成することができます。
飲食店やお店の道案内やお友達にメールで URL を送り場所を教えるには、マップに線を引けるのはとても便利な機能ですね。
ロカポDIYマップ：自分だけのオリジナルマップを作ろう！様にアクセスして、
「 今すぐＤＩＹマップを作るにはこちら！ 」 のリンクをクリックします。
以下の画面の左側のツールバーの一番下のアイコン
 をクリックします。
|
 |
「 ここに住所または場所名を入力 」 に表示させたい地図の住所や場所名を記入して「 Google マップを開く 」 をクリックします。
 |
別窓が開き、先ほど指定した位置が Google マップで表示されるので
上部の 「 このページのリンク 」 をクリックします。
 |
別窓で表示されたブラウザの上部のアドレス （ URL ） を選択し、右クリックしてコピーします。
 |
あらかじめ表示されている 「 ロカポＤＩＹマップ 」 の 「 ステップ 6 」 のボックスに
コピーした URL を貼り付けて 「 移動 」 をクリックします。
 |
指定した位置が表示されたら、ツールバーの上から２番目のアイコンをクリックして線の色と太さを指定します。次に、１番上のアイコンをクリックして地図に線を引きます。
やり方は、まず線を引きはじめる位置をクリックし、曲がり角ごとにクリックすると線を引くことができます。
マーカーを表示したい場合は、アイコンをクリックして地図上をクリックすればマーカーが配置されます。
カスタマイズが完了したら、右下の左から２番目のアイコンをクリックして長〜い URL を圧縮します。
 |
「 "キー・テキスト"を入力して下さい 」 に、お好きな英数字を入力して 「 OK 」 をクリックします。これで下部に表示された URL が作成した地図の URL です。
 |
URL をクリックして地図が表示されれば完了です。この URL をページに貼り付けたり、お友達にメールで送ったりすることができます。
 |
自分のホームページやブログなどで地図を表示したい場合は、下部の URL が表示されている右側のアイコンをクリックします。
 |
ページ上部のプロパティボックスで大きさ・その他を設定して、「 OK（プレビュー） 」 をクリックします。
 |
表示される地図と HTML コードが表示されるので、コードをコピーしてホームページやブログに貼り付けます。
 |
以下のように自分でカスタマイズした地図が表示されれば完了です。
こちらの方法だと、 「 Google Maps API Key 」 を取得しなくても自分のホームページやブログに地図を表示することができます。
「 文字コードや別ページにするのはよくわからない 」 って方には
簡単でおすすめです。ヽ(=´▽`=)ノ
