そんなところ、未だに私のところに友人知人からどうやるの?と問い合わせがあるので、面倒なので公開します
2ヶ月前にも書きましたが、再度:
https://yey-shonan.blogspot.jp/2016/10/google-map-api.html
まずは https://developers.google.com/ にアクセスしてください
つぎに、「Maps」があるのでそこをクリック
するとここへ移動します
そのまま下へスクロール
Google Maps Embedded API に登録が必要です
https://developers.google.com/maps/
https://developers.google.com/maps/web/
プランは無料でもクレジットカードを登録すると大幅に無料の制限がアップされますが、Embeddedに関しては無料。
こちらを参照願います:
https://developers.google.com/maps/pricing-and-plans/
Javascript API をご利用なら通常1000回/月のアクセスで利用不可になりますが、登録すると25000回/月に大幅アップなので、ちょっと心配だったら登録してください。
でも今回はEmbeddedなので、どうやら「無料」のままだわ!
https://developers.google.com/maps/pricing-and-plans/#details
スーパー蛇足ですが、個人と会社の経費の問題などや、個人的にGoogleさんにクレカ番号などを登録したくなければ、Yahooのマップをご利用ください。Yahoo! JAPANの登録はまた次の機会にでも。
実はこの中で「Embedded」がなかったので無料だったと気づきました(笑)
では、脱線したので戻ります。
https://developers.google.com/maps/web/ ←ここの中です
そして、「Google Maps Embed API」 をクリックしてください
こちらへ移動されます:
https://developers.google.com/maps/documentation/embed/
下にスクロールしても「キー取得」が現れます
さて、ここの「キー取得」を押すと登録画面が現れます。
これが現れるので、アクティベートするのに「続ける」を押してください。
ここで過去にプロジェクトとかを作ったことがあるなら「プロジェクトを作成」の中にリストが表示されます。
ここは、「続行」を押すと新規のプロジェクトが作成されます。
途中で「作成中」 と「APIを有効にしてます」が表示されます。
そしてコンソール画面に移動してます。
プロジェクト名が出てきます。key?project=XXXXXXX ←ここの部分です。
これはGoogleさんが勝手に言葉を組み合わせた任意のMy Project名です。
後ほど変更できるはずです。作るたびに変更されます。
次はAPIキーを登録
デフォルトで「API キー1」 となっていますので、これも重複しない管理しやすい他の名前に変えても大丈夫です。
その下に「なし」となっています。
ここは「なし」なのはセキュリティ上よろしくないので「HTTPリファラー(ウェブサイト)」←つまり自分のサイトのドメイン名に置き換えます。
私はこんな感じで記入しました。
*.domain.com「作成」を押しますと API キーが作られますので「制限」をしてください。
www.domain.com/*
*.domain.com/*
あーーーーーーーーーーー!
ここで今、気づいた!
前回ので、なぜ Embed API が wordpress のJETPACKで拒否られたのが!
Javascript api を登録しようとしていたからだ!!!
そして、wordpressなどにWidgetにAPIキーを入れました。
しかし、これだと iframe を利用した組み込みが出来ないので、こちらに関してはまた書きます。