ラベル jetpack の投稿を表示しています。 すべての投稿を表示
ラベル jetpack の投稿を表示しています。 すべての投稿を表示

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 を利用した組み込みが出来ないので、こちらに関してはまた書きます。
 







 

2016年10月6日木曜日

Google Map API

知っている人は知っているが知らない人は知らない(当然だわ)

実は、今年の6月にGoogleさんが自分のホームページで地図を表示するのに規制を掛けてきてAPIを通じて(登録して)アクセスしないと、地図が表示されないようになってしまいました。

例えばこれね:
「家族葬の家 アドレ」(http://www.adorer-shonan.com)ですが今まではAPI無しでwordpressのウィジェットで簡単に地図を表示することが出来ましたが、6/2以降はAPIを登録しないとエラーになる現象になりました。


Wordpressに限らず、ホームページ上で今までのように表示させるには、以下のところへアクセスし、登録する必要があります:

ここでAPIキーをゲットします

https://developers.google.com/maps/documentation/javascript/get-api-key

実は、この通りにやっても私はずっとダメでして、今日、再度チャレンジしたらできたんですね。

今回は:自棄になって




リファラーのところですが:(ここは自分のサイト名を入れてね)
*.domain.com
www.domain.com/*
*.domain.com/*

を入れてもダメでしたので、API Managerを開いて:

https://console.developers.google.com/apis/dashboard


ライブラリに行って、Google Map Embed API を探して有効にしました。



そして、再度「有効」にして、先程のAPIキーを入れて、再度挑戦したら出来ました。

何故だかわからないけど、今まで手順通りに作業していても出来ず、今日は出来ました。

ちなみに wordpress で Jetpack を入れているこの「コンタクト」のウィジェットです。

https://jetpack.com/support/extra-sidebar-widgets/contact-info-widget/