Google Maps JavaScript API V3 その1 - APIキー取得 〜 Hello, world!

超！久々にGoogle Maps APIを使う案件があったが、V3になってから全く触っていなかったため、公式のドキュメントと睨めっこしながらいじってみた。

APIキーを取得

昔いじってたときは無くても大丈夫だったけど、今は必須？な様子なので、公式のスタートガイドの通りに進めたんだけれど...

↓スタートガイドの文面

1. API コンソール https://code.google.com/apis/console にアクセスし、Google アカウントでログインします。
2. 左側のメニューから [Services] をクリックします。
3. Google Maps API v3 サービスをオンにします。
4. 左側のメニューから [API Access] をクリックします。API キーは、[API Access] ページの [Simple API Access] セクションにあります。Maps API アプリケーションでは [Key for browser apps] を使用します。

↓実際の画面

チュートリアルと画面がぜんぜん違う∑(ﾟДﾟ)
…まあGoogleのAPIのドキュメントが古いなんてことはよくあることだし、それっぽい項目を探して設定してみる。

1. Google Maps JavaScript APIを有効にする。

APIコンソールにアクセスして、左側メニューの「API」をクリックし、表示されたAPI一覧から「Google Maps JavaScript API」をクリック。

※多分よく使われているAPIの一覧の中にあるけど、なければ検索ボックスで検索してもOK。

「APIを有効にする」ボタンをクリック。

2. APIキーを作る

左側メニューの「APIと認証」内の「認証情報」をクリックし、「公開 API へのアクセス」の「新しいキーを作成」ボタンをクリック。

作るキーの種類を聞かれる。今回はブラウザ上で表示させるためのキーがほしいので、「ブラウザキー」を選択。

許可対象のリファラを聞かれるので、サイトのURL等を例に習って入力。「作成」ボタンをクリック。

「公開APIへのアクセス」欄に、ブラウザアプリケーションのキーっていう項目ができてたら完了。

Hello, world!

基本的な設定方法はすべて公式のスタートガイドの通りでOK。非常に親切なチュートリアルで助かりますね。

大まかな流れは、

1. API読み込み（ここでAPIキーを使う）
2. HTML側で地図用の要素を作っておく。
3. 地図オブジェクト生成

っていう感じ。
マーカーとかポリラインとかは全て、オブジェクトを作って地図オブジェクトに追加...という形になる。