Web ブラウザ上で JavaScript, HTML, CSS のコードを書き、そのまま公開できる jsdo.it で、Google Maps JavaScript API v3 の Getting 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,
とした。
@takatama_jp 