2016年12月7日水曜日

Google Map API その2

Wordpressのサイトなどでウィジットを使ってGoogle Mapが表示されなくなり、6ヶ月経ちました。
そんなところ、未だに私のところに友人知人からどうやるの?と問い合わせがあるので、面倒なので公開します

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リファラー(ウェブサイト)」←つまり自分のサイトのドメイン名に置き換えます。



 *.example.com/* を自分のドメイン名に変更します。

私はこんな感じで記入しました。
*.domain.com
www.domain.com/*
*.domain.com/*
「作成」を押しますと API キーが作られますので「制限」をしてください。


あーーーーーーーーーーー!

ここで今、気づいた!
前回ので、なぜ Embed API が wordpress のJETPACKで拒否られたのが!
Javascript api を登録しようとしていたからだ!!!

 

そして、wordpressなどにWidgetにAPIキーを入れました。


しかし、これだと iframe を利用した組み込みが出来ないので、こちらに関してはまた書きます。