wordpress制作ノート

自分の備忘録として残しています。

GoogleMapをサイトに埋め込む時、同業他社のアイコンを表示させなくする方法(WoedPressじゃないけど)

地図1

例えば、「池野智博税理士事務所」をGoogleMapで検索すると上の地図のようにたくさんの同業者さんが表示される。この地図を池野智博税理士事務所さんのサイトに掲載することは当然出来ない。

いろいろサイトを調べたけど、このやり方は載っていなかったのでUPしておきます。

 

方法は2つ。どちらも表示される見た目は同じ。

1つは、GoogleMaps APIの、EmbedAPIを使う方法。

そしてもう1つは、APIを使わずに表示させる方法。こっちが簡単です。

 

Ⅰ.まずは簡単なAPIを使わずに表示させる方法から

1.GoogleMapでアイコンを表示させる場所を会社名も入れて検索する。

 

2.因みに、

住所で検索してから、検索窓の下に表示される会社名をクリックすると同業他社は表示されないという方法もあるが、今回例に挙げる会社さんは、建物名を含めてGoogleMapに登録しているのが災いしたのか表示されませんでした。(地図2)

地図2 検索窓

 

3.地図1のような地図が表示されたら、例えば最寄り駅の出口などを右クリックして「ここからのルート」を選択する。(地図3)

地図3 右クリック

4.で、ルートが表示された地図がこちら(地図4)

地図4 同業者なし

ルート表示は「徒歩」を選択するとこんな感じになります。

 

5.次にサイトに表示させる縮尺に合わせます。縮尺は1z(地球)から21z(住宅)まであります。今回は18.25zくらいに合わせます。アドレスバーを直接編集するわけではないですが、直接編集も可能です。

アドレスバーの表示

地図5 縮尺合わせ

6.次に画面左上のメニューマークをクリックしてメニューを表示します。

「地図を共有または埋め込む」を選択します。(地図6)

地図6 メニューから共有を選択

共有の画面が表示される

7.共有の画面が出たら、地図をサイトに埋め込む場合は「地図を埋め込む」をクリック。更にサイズを変更したい場合はウィンドウ左上の「中▼」の部分をクリックします。

地図を埋め込む をクリックしたあとの画面

中▼ をクリックして、カスタムサイズを表示させた画面

8.最後に「HTMLをコピー」をクリックして、サイトにコードを貼り付けして完了です。

 

----------------------------------------------------------------------------------------------

Ⅱ.GoogleMaps API の「Embed API」を使う方法。

mapsplatform.google.com

最初に、なぜ「EmbedAPI」を使うのかというと、

「JavaScriptAPI」や「StaticAPI」は、月額の費用が発生する(可能性がある)ということ。 料金表を見ると、決して高い訳では無いし、月200$までは無料みたいなキャンペーン?をやってるし、ECサイトでなければ限りなく無料だと思うんですが、「有料の可能性をはらんでいる機能を使うこと」が嫌だったので、「EmbedAPI」を使うことにしました。

GoogleMapsAPI料金表の一部

1.まず、アカウントを作る。Googleアカウントがあればサクサク作れますが、利用規約とかメチャクチャ量が多くて、真面目に読もうとしたら嫌になります。

 

2.新しいプロジェクトを作ります。

3.使いたいAPIを選択します。今回はEmbedAPIだけでOKですが、この時点では料金が発生しないので、とりあえずmapsAPIの全部を有効化しました。

 

maps API 有効化

4.次に認証情報の画面でAPIキーを取得します。キーの名前をクリックして、設定画面で「キーの制限」と「APIの制限」の両方に、制限をかけることを忘れずに行って下さい。

認証情報のページでAPIキーを取得、設定

5.次に、ドキュメントのページを見ながらコードを作っていきます。

今回は、directions を参考にしてつくりました。

developers.google.com

作ったコードはこちら。

---------------------------

<iframe src="https://www.google.com/maps/embed/v1/directions?
                key=(自分のAPIキー)
                &origin=35.69954383007385, 139.63569778012132
                &destination=place_id:(取得したプレイスID)
                &mode=walking
                &zoom=18.75
                &center=35.699273348876304, 139.63647617641968"
                width="100%" height="350" style="border:0" loading="lazy" allowfullscreen></iframe>

---------------------------

コピーして使うなら、緑色の部分が要変更箇所です。

赤色のdirections?をplace?とかに変える(パラメータも変える)と、同業他社が表示される地図が現れます。

&destination= の部分は、私はplace_idを使いましたが、上記リンクのドキュメントにある通り、緯度経度でも使えます。

ちなみにプレイスIDの取得はこのページで出来ます。

developers.google.com

 

6.サイトを作ってローカルでテストする時、APIの制限でリファラーを選択していると思いますが、自分のインターネットアクセスのIPで制限をかけ直さないと確認できません。IPの制限とリファラーの制限はどちらか1つしか使えません。めんどくせー!!!

 

いかがでしたでしょうか。

私は今回はじめてAPIなるものを使ったので、

知ってる方には笑止千万でツッコミどころ満載なのでしょうが、

ドキュメントの和訳で混乱したり、ログインしてるのに

「はじめてみる」っていうボタンが表示されてたり、

できるまで6日間も七転八倒してました。

 

MapsEmbed APIを使って地図の表示に成功してからふと、

「同じことをAPIなしで出来ないのかな?」と思い、

GoogleMapから(冒頭で書いたように)試してみたら

2分で出来て泣きそうになりました。

こんな悲しい記憶を忘れまいと、ログに残しておきます。

 

「もっといい方法があるよ」とか

「普通はこうするだろ?」とかありましたら

お知らせいただけると大変嬉しいです。

 

最後まで御覧いただきありがとうございました。

GoogleMapをサイトに埋め込む時、同業他社のアイコンを表示させなくする方法

GooglwMapをサイトに埋め込む時、同業他社のアイコンを表示させなくする方法

 

地図1

例えば、「池野智博税理士事務所」をGoogleMapで検索すると上の地図のようにたくさんの同業者さんが表示される。この地図を池野智博税理士事務所さんのサイトに掲載することは当然出来ない。

いろいろサイトを調べたけど、このやり方は載っていなかったのでUPしておきます。

 

方法は2つ。どちらも表示された見た目は同じ。

1つは、GoogleMaps APIの、EmbedAPIを使う方法。

そしてもう1つは、APIを使わずに表示させる方法。こっちが簡単です。

 

Ⅰ.まずは簡単なAPIを使わずに表示させる方法から

1.GoogleMapでアイコンを表示させる場所を会社名も入れて検索する。

 

2.因みに、

住所で検索してから、検索窓の下に表示される会社名をクリックすると同業他社は表示されないという方法もあるが、今回例に挙げる会社さんは、建物名を含めてGoogleMapに登録しているのが災いしたのか表示されませんでした。(地図2)

地図2 検索窓

 

3.地図1のような地図が表示されたら、例えば最寄り駅の出口などを右クリックして「ここからのルート」を選択する。(地図3)

地図3 右クリック

4.で、ルートが表示された地図がこちら(地図4)

地図4 同業者なし

ルート表示は「徒歩」を選択するとこんな感じになります。

 

5.次にサイトに表示させる縮尺に合わせます。縮尺は1z(地球)から21z(住宅)まであります。今回は18.25zくらいに合わせます。アドレスバーを直接編集するわけではないですが、直接編集も可能です。

アドレスバーの表示

地図5 縮尺合わせ

6.次に画面左上のメニューマークをクリックしてメニューを表示します。

「地図を共有または埋め込む」を選択します。(地図6)

地図6 メニューから共有を選択

共有の画面が表示される

7.共有の画面が出たら、地図をサイトに埋め込む場合は「地図を埋め込む」をクリック。更にサイズを変更したい場合はウィンドウ左上の「中▼」の部分をクリックします。

地図を埋め込む をクリックしたあとの画面

中▼ をクリックして、カスタムサイズを表示させた画面

8.最後に「HTMLをコピー」をクリックして、サイトにコードを貼り付けして完了です。

 

----------------------------------------------------------------------------------------------

Ⅱ.GoogleMaps API の「Embed API」を使う方法。

mapsplatform.google.com

最初に、なぜ「EmbedAPI」を使うのかというと、

「JavaScriptAPI」や「StaticAPI」は、月額の費用が発生する(可能性がある)ということ。 料金表を見ると、決して高い訳では無いし、月200$までは無料みたいなキャンペーン?をやってるし、ECサイトでなければ限りなく無料だと思うんですが、「有料の可能性をはらんでいる機能を使うこと」が嫌だったので、「EmbedAPI」を使うことにしました。

GoogleMapsAPI料金表の一部

1.まず、アカウントを作る。Googleアカウントがあればサクサク作れますが、利用規約とかメチャクチャ量が多くて、真面目に読もうとしたら嫌になります。

 

2.新しいプロジェクトを作ります。

3.使いたいAPIを選択します。今回はEmbedAPIだけでOKですが、この時点では料金が発生しないので、とりあえずmapsAPIの全部を有効化しました。

 

maps API 有効化

4.次に認証情報の画面でAPIキーを取得します。キーの名前をクリックして、設定画面で「キーの制限」と「APIの制限」の両方に、制限をかけることを忘れずに行って下さい。

認証情報のページでAPIキーを取得、設定

5.次に、ドキュメントのページを見ながらコードを作っていきます。

今回は、directions を参考にしてつくりました。

developers.google.com

作ったコードはこちら。

---------------------------

<iframe src="https://www.google.com/maps/embed/v1/directions?
                key=(自分のAPIキー)
                &origin=35.69954383007385, 139.63569778012132
                &destination=place_id:ChIJk448z3HyGGARJLsbjiK_F0U
                &mode=walking
                &zoom=18.75
                &center=35.699273348876304, 139.63647617641968"
                width="100%" height="350" style="border:0" loading="lazy" allowfullscreen></iframe>

---------------------------

コピーして使うなら、緑色の部分が要変更箇所です。

赤色のdirections?をplace?とかに変える(パラメータも変える)と、同業他社が表示される地図が現れます。

destination は、私はplace_idを使いましたが、上記リンクのドキュメントにある通り、緯度経度でも使えます。

 

6.サイトを作ってローカルでテストする時、APIの制限でリファラーを選択していると思いますが、自分のインターネットアクセスのIPで制限をかけ直さないと確認できません。IPの制限とリファラーの制限はどちらか1つしか使えません。めんどくせー!!!

 

いかがでしたでしょうか。

私は今回はじめてAPIなるものを使ったので、

知ってる方には笑止千万でツッコミどころ満載なのでしょうが、

ドキュメントの和訳で混乱したり、ログインしてるのに

「はじめてみる」っていうボタンが表示されてたり、

できるまで6日間も七転八倒してました。

 

MapsEmbed APIを使って地図の表示に成功してからふと、

「同じことをAPIなしで出来ないのかな?」と思い、

GoogleMapから(冒頭で書いたように)試してみたら

2分で出来て泣きそうになりました。

こんな悲しい記憶を忘れまいと、ログに残しておきます。

 

「もっといい方法があるよ」とか

「普通はこうするだろ?」とかありましたら

お知らせいただけると大変嬉しいです。

 

最後まで御覧いただきありがとうございました。

003_ローカルテストサーバー MySQL(MariaDB)でエラー「設定ファイルの中に記述されているパスフレーズ(blowfish_secret)の長さが正しくありません。 32 バイトでなければなりません。」

設定ファイルの中に記述されているパスフレーズ(blowfish_secret)の長さが正しくありません。 32 バイトでなければなりません。

 

phpMyAdminのログイン後画面にこんなエラーが出ました。

 

分からないので検索するとこんなサイト様が。。

ramendelicious.com

config.inc.php というファイルの、blowfish_secret の値を32バイトに変更するそうだ。

 

1.とりあえず config.inc.php を検索。C:\xampp\phpMyAdmin の配下に発見。

2.config.inc.php のバックアップコピーを取っておく。

3.エディタで config.inc.php を開く。

4.6行目に、

$cfg['blowfish_secret'] = 'xampp'; /* YOU SHOULD CHANGE THIS FOR A MORE SECURE COOKIE AUTH! */

を発見。blowfish_secret を検索するまでもなかった。初期値は"xampp"。よく分かんないけどこれではまずそう。そのあとのコメントも、「より安全なCookie認証のために変更する必要があります。」って書いてある(笑)。

5.32バイトのパスフレーズを作る。いいサイト様があった。

www.luft.co.jp

ここでパスフレーズを作って”xampp”と入れ替える。

6.phpMyAdminに再度ログイン。エラーは出なくなった。

 

両サイト様、どうもありがとうございました。

002_WordPressの初期設定とプラグインのインストール

初期設定

WordPressダッシュボードで、「設定」-「一般」を選択。

必要な項目を入力します。

WordPress アドレス (URL)、サイトアドレス (URL)は、ローカルサイトなのでそのまま、管理者メールアドレスも自分のメアドを入れておきます。

「設定」-「パーマリンク」では、今回はカスタム構造を選択。
/%year%/%monthnum%/%day%/%category%/
で(デフォルト?)保存します。

 

-----

プラグインのインストール

All in one SEO pack

Google sitemap XML

WP-PAGE NAVI

BASIC AUTH

SITE GUARD PLUGIN

をインストールします。

 

001_ローカル環境にXAMPPとWordPressを構築する

MAMPMacintosh, Apache, MySQL, PHP

XAMPP(Xross platform,  Apache, MariaDB/MySQL, PHP, Perl

私はwindows機を使っているのでXAMPPをインストールします。(MAMPwindows版もあります)

 

インストールから設定までははこちらの記事を参照しました。

bazubu.com

インストールの場所は、C:¥でなく、USBメモリでもなく、今回はD:¥にインストールします。

C:¥は、デフォルトだが、他のアプリと競合したらやだ。Cドライブが膨れるのもやだ。

USBメモリは、いろいろ便利かと思ったけど、64GBのものしかなかったので見送り。

という理由でDドライブ直下にインストールします。

 

データベース・キャラクタセットの照合順序は、

「utf8mb4_general_ci」

にしました。その理由は、絵文字や第二水準の漢字を保存させたいからです。

(この部分は今後仕様変更の可能性あり)

ja.wordpress.org

penpen-dev.com

 

-----

WordPressをダウンロードして、インストールする際のインストール場所は、

D:¥xampp¥htdocsの直下。

 

次に、

http://localhost/wordpress/

にアクセスし、設定作業。

ずっとこの記事の通り進めます。

bazubu.com

設定完了♪

 

-----

さて、今回初めてブログを書きますが、自分が書こうとしたブログよりも、もっと完成度の高いサイトを発見し、そちらを参考にしてインストール作業を進めさせて頂きました。

となると、果たして、このブログを「公開」する意味はあるのか?

結論:公開する意味はほぼないかも (f^^;

でも、ひょっとしたら、こんなサイトでも誰かの助けになるかもしれない、とも思います。

 

このブログを書こうとした意味をもう一度考えます。

このブログは自身の備忘録です。本来なら自分で画面のキャプチャ画像を張ったりすべきですが、優れたブログが他にあって、事実、それを見ながら作業を進めたのです。

偽らず、先人に感謝の気持ちを込めてリンクを張らせて頂きました。

これからもこのスタイルで進めていこうと思います。