jsdo.it でお手軽に Google Maps JavaScript API を試す

Web ブラウザ上で JavaScript, HTML, CSS のコードを書き、そのまま公開できる jsdo.it で、Google Maps JavaScript API v3Getting Started に掲載されている Hello, World を試してみた。

Hello World – Google Maps JavaScript API v3
http://jsdo.it/takatama/jRDt
指定した緯度経度の地図を表示する、ごくごく簡単なもの。

前提
Google のアカウントを持っていること。
jsdo.it のアカウントを持っていること。

手順
(1) https://code.google.com/apis/console/ にアクセスする。ログインが求められる。ログイン後、Create Project… ボタンを押す。

(2) 右ペインの Services を選択すると、利用可能な API の一覧が表示される。Google Maps API v3 を ON にする。

なお、Google Maps API は一日あたり25,000リクエストまでは無料で、1,000リクエスト超過ごとに$4かかる (2012/08/25時点) 。詳しくは地図読み込み回数の超過分のオンライン購入価格を参照。

(3) terms of service の内容をよく確認し、同意するのであれば I agree to these terms. がチェックされているのを確認の上、Accept ボタンを押す。

(4) https://code.google.com/apis/console/ に戻り、右ペインの API Access を選択する。Simple API Access に API key: が表示されているのでメモを取っておく。

なお、デフォルトの設定だとどのサイトに置いた JavaScriptからでもこの API key が利用可能になっている。今回は jsdo.it でのみ実行を許可するため Edit allowed referers…をクリックして、
jsrun.it/*
を追加しておく(jsdo.it のスクリプトは http://jsrun.it/ に配置されている)。

(5) Hello, World の例 (html) を jsdo.it にコピーして、src=”http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE”
の部分を修正する。

YOUR_API_KEY を先ほど取得した API key に変更する。
SET_TO_TRUE_OR_FALSE を false に変更する。大文字の FALSE だと動作しないので注意する。

(6) 表示する地図を調整する。今回は東京駅を表示するために、
center: new google.maps.LatLng(35.681382, 139.766084),
zoom: 14,
とした。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中