ホームページに、拡大・縮小できる地図を作成する

ホームページに、拡大・縮小できる地図があったら便利ですよね。
そこでホームページに地図を載せてみましょう。
完成ページは 小山内株式会社へのアクセス(http://www.osanai.co.jp/company/places.asp) をご覧ください。

Google Maps API を使います。
* Google Maps API キーを取得するには Google アカウントが必要です。無料ですから、あらかじめ作成しておきます。

1. Google Maps API (http://code.google.com/intl/ja/apis/maps/) にアクセスします。

2. ページ右側にある、[スタート ガイド]の「登録して Google Maps API キーを取得します。」をクリックします。


3. 利用規約に同意するならチェックを付けて、「使用する Web サイトの URL」を http:// から入力して[API キーを生成]ボタンをクリックします。


4. Google Maps API Key をメモ帳などにコピーしておきます。ページの最上部にあります。


5. Javascript を作成します。ここでは、私が作成したものを雛形としてお使いください。
 1) 「{Google Maps API Key}」を削除して、手順4 で取得した Google Maps API Key を貼り付けます。
 2) 「{場所の名前}」を削除して、「小山内株式会社」などと地図の場所を入力します。地図上に表示される吹き出しです。
 3) 「{緯度, 経度}」を削除して、緯度と経度を入力します。2箇所あります。

  (画像をクリックすると Javascript のテキストを入手できます。)
  

  緯度経度の取得方法は、Geocoding (http://www.geocoding.jp/api/) を使ってみましょう。
  住所を入力して[検索]ボタンをクリックします。
  <lat>〜</lat> で囲まれている数字が緯度
  <lng>〜</lng> で囲まれている数字が経度
  

6. Javascript ができたら、今度はHTMLファイルの作成です。
 1) HTMLファイルは UTF-8 で作成します。
  <head>〜</head> の一番最初に下記のタグを置いて、ファイルも UTF-8 形式で保存します。
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
 2) 手順5で作成した Javascript を <head>〜</head> の間に置きます。
 3) body に 「onload="initialize()" onunload="GUnload()"」オプションを追加します。
  <body onload="initialize()" onunload="GUnload()">
 4) <body>〜</body> の間で地図を配置した居場所に、下記のタグをおきます。
  <div id="map_canvas" style="width: 550px; height: 400px"></div>

7. まだ終わりではありません。緯度経度の微調整をします。
 作成したHTMLファイルをブラウザで確認してみましょう。地図をどんどん拡大します。するとポインタが指し示している地点が微妙にずれていませんか?
 緯度を 0.0001 増やすと北(上)方向へ10メートルほど移動します。減らすと南(下)へ移動します。
 経度を 0.0001 増やすと東(右)方向へ5メートルほど移動します。減らすと西(左)へ移動します。

以上です。できましたか?


本記事に関するお問い合わせはこちら
その他、情報提供、ご意見、ご感想はこちらまで。




特定商取引法の表記 | プライバシーポリシー(個人情報保護方針) | サイトご利用規約 |

(C) 2009-2011 OSANAI CO., LTD. All rights reserved.