F.Ko-Jiの「一秒後は未来」

Google Maps APIの始め方

Google Maps APIを利用すると、「全国ロケ地図」「KaGMapラボ 路線検索マップ」「ぐぐるなびマップ(β版)」などのように、誰でもGoogleマップを利用したサイトを自由に作ることができます。しかし、Google Maps APIの公式ページは英語版のため、取っ付きにくいかもしれません。そこで、Google Maps APIの導入までの手順を簡単に解説したいと思います。

API利用のためにすることは、サインアップだけです。

  • Google Maps APIの”Sign up for a Google Maps API key”をクリックします。
  • ページ下部のチェックボックスにチェックを入れ、My Web Site URL:という欄に、APIを利用するページを置くディレクトリまでのURLを入力します。

     例えば http://www.blog.livedoor.jp/cosmoworld/map.html というページでAPIを利用するならば、 http://www.blog.livedoor.jp/cosmoworld/ と入力します。

  • Generate API Keyボタンをクリックすると、そのURL専用のキーが生成されます。

     なお、ここでGoogleのアカウントを持っていない(もしくはログインしていない)場合は、Googleアカウントへのログイン画面が出ますので、そこでログインするなり、新規登録をするなりしてください。ログインできれば、キーが生成されます。

    サインアップは以上で終了です。

    キーが生成されたページには、”Here is an example web page to get you started on your way to mapping glory:”と書かれた下に、スクリプトのサンプルが表示されます。とりあえずこのスクリプトをコピーして、ファイルに貼り付けてウェブサイトにアップしてみましょう。アップしたページにアクセスし、きちんと地図が表示されれば成功です。

    【サンプルスクリプトの解説】

     <div id=”map” style=”width: 500px; height: 400px”></div> …(1)

    このdivタグの場所に地図が表示されます。

     var map = new GMap(document.getElementById(“map”));

    GMapオブジェクトを生成しています。document.getElementById(“map”)で、ページ内のタグの中でid=”map”が指定されているタグを抽出しています。すなわち、(1)のdivタグが該当します。

     map.addControl(new GSmallMapControl());

    addControlはGMapオブジェクトのメソッドです。new GSmallMapControl()で生成される地図移動操作をするオブジェクト(小型版)を、地図に追加しています。大型版を追加したいときは、GLargeMapControl()を利用します。

     map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

    centerAndZoomもGMapオブジェクトのメソッドです。東経-122.1419、北緯37.4419位置を示すGPointオブジェクトと、ズームレベルを引数に取ります。これで、指定された地点の地図が指定されたズームレベルで表示されます。

    参照:Google Maps API Documentation

    コメントを残す

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です

    著者について

    fkoji

    F.Ko-Ji

    Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

    » 詳しいプロフィールや運営サービスの一覧など