Google Mapsをサイトに埋め込む

  • 投稿者:
  • カテゴリ:
このエントリーをはてなブックマークに追加

20131209165651_blogpix.png

Google Mapsをサイトに埋め込んで使用する場合、GoogleからAPI Keyを取得して埋め込む必要があります。

スタート ガイド - Google Maps JavaScript API v3 — Google Developers
https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja

API Keyを取得するため上記のサイト内の「API コンソール https://code.google.com/apis/console にアクセスし、Google アカウントでログインします。」というところへアクセスしますが、説明にある「Services」という項目がいきなりありません。

「Services」ではなく「APIs & auth(API と認証)」をクリックするとAPIの一覧ページが表示されるので、その中の「Google Maps API v3」を規約に同意して有効にします。

20131209155413_blogpix.png

次にAPI Keyを取得します。API Keyはなくても地図は使える様なことが書いてあるところもあるのですが、API Keyがないと地図が表示されない様な...

先ほどの「API コンソール https://code.google.com/apis/console」に再度、アクセスしますが、この時、下記の様なメニューが左側に出る場合があります。

20131209162942_blogpix.png

その場合は、黄色いフローティングウィンドウの「元に戻す」をクリックして、古いページを表示させた方がAPI Keyを発行するページを見つけやすいです。

20131209163013_blogpix.png

さらに元に戻す場合は作業後に下記画像の「Cloud Console」というところをクリックします。

20131209163639_blogpix.png

古いページを表示さて「API Access」というページに移動すると下記の様なページになります。

20131209170344_blogpix.png

20131209163849_blogpix.png

「Simple API Access」の「Create new Browser Key...」をクリックしてAPI Keyを作成します。

20131209165258_blogpix.png

20131209165333_blogpix.png

API Keyが発行されます。

20131209171044_blogpix.jpg

このエントリーをはてなブックマークに追加