WordPressでGoogleマップが表示されないというご相談を頂きました。通常の埋め込みなら表示は可能なはずです。
目次
Google mapをwordpressに埋め込む方法
質問お願いします。
初心者ですが、色々と調査しましたが原因究明出来ませんでしたので質問させてください。
WordPressに地図を埋め込みたいのですが、プレビューで表示出来ません。
1.google mapsで住所検索
2.「共有」ー「地図を埋め込む」ー「HTML」をコピー
3.Wordpressの編集画面のテキストで貼り付けるとデータで表示確認までは出来た
4.プレビューで見ると表示されない
2018.7月よりgooglemapがapiを使用しなければならないと書かれていたのでapiを取得しました。
＝＝apiキー編集 ＝＝＝
■アプリケーションの制限
HTTP リファラー （ウェブサイト）ON
https://アドレス/* ※試していきました、設定は一つづつ
www.アドレス/*
.アドレス/*
■APIの制限
Mapsjavascript API ON
プラグイン「TCD google maps」の住所、APIを入力してもプレビューが表示されない、編集でもwordpressプレビューでも表示されない。
※そのため、HTTP リファラー の対象サイトを上記３つのように設定し試していきました。
しかし、ダメでした。
知り合い管理のwordpressで管理人のPCで地図を埋め込むとgoogle mapから共有する方法でいけました。apiも必要ないとのこと。
私も管理人wordpressに自身のPCでログインし入って編集しましたが、テキストに貼り付けて保存するとコードが消えてしまい、地図以前の問題です。※テキストに貼り付けてデータで見ると地図は確認できた。
サイトで調べましたが、古い記事や２０１８年７月より前の記事が多く分かりません。
当たり前のことなので載ってないのでしょうか？
初心者であり、分かる人も周りにおらず非常に困っております。
是非ご教授いただきたくよろしくお願いします。
Google mapのAPI問題
＞ハミルトンさま
ご質問ありがとうございます。
まず、APIの仕様についてですが、僕は「APIを使うなら有料」と解釈しています。
ルート表示等の無いシンプル・一般的なmapのiframe（HTML）なら 共有 ＞ 地図を埋め込む で問題なく使えるはずです。
なので一旦APIのお話は置いておきましょう。
「TCD google maps」を試しているようですが、他には試されましたか？
Google mapでAPIキーが必須になったあたりに「TCD google maps」を使った記憶がありますが、地図が表示されず別のプラグインを利用したと思います。
＞テキストに貼り付けて保存するとコードが消える。
＞テキストに貼り付けてデータで見ると地図は確認できた。
この現象がよくわかりません。
テキストというのはテキストエディタのことでしょうか。
コードが消える・データで見ると地図は確認できた というのはエディタ画面でしょうか。プレビュー画面でしょうか。
コードは残っているが、プレビューで地図が表示されないのか。
保存するとテキストエディタに貼り付けたコード自体が消えてしまうのか。
これらによって考えられる原因も違ってきます。
プラグインを停止して、普通に埋め込みでやってみる
まずはプラグインを停止して、普通に埋め込みコードを試してみましょう。
この際は、テキストエディタのみを利用し、ビジュアルに切り替えたりしないで試してみてください。
これで解決したらプラグインの問題だったと考えられます。
プラグイン側にサイト上の地図（iframeタグ）に対するCSSが書かれていたりすると、エラーの元になることもあるかもしれません。（テーマのCSSと競合するなど）
エディタを拡張するプラグインやテーマを利用していないか
上記のプラグインを停止してもダメなら、エディタを拡張しているプラグインやテーマの関連を疑います。
例 Tiny MCE Advanced のようなプラグインは、既存のエディタを拡張するプラグインです。
こういったプラグインを停止してテストしてみてください。
いずれにしても、
1.シンプルなGoogleマップの埋め込みHTML（iframeタグ）を
2.プラグインを停止したりテーマを変えたりしてエディタに貼ってみる
ということを試してみてください。
他の環境で出来ていて、ハミルトンさんの環境でできていないのならテーマやプラグインに原因がある可能性が大きいです。
参考にしていただければ幸いです。