読者です 読者をやめる 読者になる 読者になる

kinalog

自称フロントエンドエンジニアが何か喚いています。

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] を使用します。


↓実際の画面
f:id:kasanka:20150331134039j:plain

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

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

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

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

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

f:id:kasanka:20150331140955j:plain


2. APIキーを作る

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

f:id:kasanka:20150331141243j:plain


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

f:id:kasanka:20150331141527j:plain


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

f:id:kasanka:20150331141840j:plain


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

f:id:kasanka:20150331142253j:plain

Hello, world!

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

大まかな流れは、

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

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