[WordPress] Visual Composer（Visual Composer）でGoogleマップを挿入する

Visual Composer（Visual Composer）でGoogleマップを挿入する方法

Googleマップをブログに挿入する方法は、ブログでは、Googleマップを挿入する「記事で説明しています。 WordPressから Visual Composer（Visual Composerの）のようなページビルダーを使用している場合には、より簡単にGoogleマップをブログに追加することができます。

ちなみにGoogleの新しいGoogleのマップAPIの標準プランに基づいて、2016年6月22日以降に作成されたすべての新規アプリケーションでは、Google Maps APIキーが必要です。現在まで、既存のアプリケーションでは、キーがなくても動作を続けますが、新しい制限が適用されるものとします。

グーグルマップAPIキーがない場合は、最初には、Googleドキュメントを参考にして、ブラウザキーを作成、Googleマップを挿入時にAPIキーを追加ヘジュオヤします。

多くの WordPress テーマはGoogle Maps Api Keyを登録することができるオプションを提供しています。たとえば、人気のテーマの一つである Bridge(Bridge) テーマは Qode Options> General メニューの一番下の「Googleマップ「セクションにキーを登録できます。Avada, Enfold などほとんどの有料テーマでは、このようなオプションを提供しています。）

もしテーマでGoogle Maps APIキーを追加するためのオプションを提供していない場合は、直接、次のようなスクリプトをテーマソースファイルに追加していただければされます（グーグルドキュメントに詳細に説明されています）。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
type="text/javascript"></script>

Visual Composer（Visual Composerの）を使用している場合、 Add new element（+記号）をクリックして、 Googleマップ 要素をクリックして、好きなところに追加するようにします。

要素を追加すると、すぐに Google Maps Settings ポップアップが表示されます。表示されない場合、編集（鉛筆）アイコンをクリックして、 Google Maps Settings 画面を表示します。

（1）には、挿入しようとするGoogleマップのソースコードを追加し、（2）には、高さを指定してくれることができます。あるいは 空白のままに反応型で動作します。（3）では、追加のクラス名を指定することができます。

Googleマップのソースはグーグルマップサイトで、目的のアドレスを検索して地図の埋め込みソースをコピーします（参照）。正しく追加された場合現在Googleマップが正しく表示されます。

場合に応じて、次のようなエラーが発生する可能性があります。

Oops！ Something went wrong。 This page did not load Google Maps correctly。 See the JavaScript console for technical details（申し訳ありません問題が発生しました、GOOGLEの地図が正常にロードされていない。JavaScriptコンソールでの技術情報を確認してください）

この場合、「Googleマップが正しくロードされていません」というエラーが発生した場合 - Google Maps APIキーと新しい制限文を参考に問題を解決しようと試みることができます。問題がうまく解決にならないと、サービスお問い合わせページで、サービス（有料）をご依頼することができます。