Google Map Api WordPress SiteOrigin 使い方 地図が表示されない

WordPress

WordPressでホームページを作るとき、プラグイン「SiteOrigin」でデザインするのがとても便利です。

この「SiteOrigin」(具体的には「SiteOrigin Google Maps」を使います。)でGoogleMapを表示させる場合、Google Map Apiが必須です。

まずは Apiを取得、リンクは時々変わるからここはgoogleで「google map api 取得」で検索する。

Googleのアカウントがある前提で進めます(ないならば取得)。




取得ページを開き、「キーを取得」をクリック、画面に従って簡単にできると思う。

残りは「それ」をコピーして、「SiteOrigin Google Maps」のほうで使うが、google側でもう一つの手順「認証」がある。

この認証はちょっとややこしい、APIキーを取得した画面で「認証情報」あるいは三角の付いたびっくりマーク「!」があるので、それをクリック、「キーの制限」の下の選択肢がいくつがある。

デフォルドは「なし」、これを(ホームページに使う場合)「HTTPリファラー(ウェブサイト)」に設定(クリック)すると、「*.example.com/*」が出現してURLを入力するんだが、「*.example.com/*」「.example.com/*」「example.com/*」などといろいろ試してください。

違うと地図が表示されないので、僕はデフォルドの「なし」のままです。

今度は、自分のサイト側、「SiteOrigin Google Maps」に入ると

Map center(住所や座標を入力)
+ API key(取得したキーを入力)

その他「+ Settings」「+ Markers」「+ Styles」「+ Directions」はズームの制御、デザイン、動作、ルート等なので、今回はスルー。

取得してキーを「+ API key」を開いてペースト。

「Map center」に住所を入れるとずれることがあるので、座標がおすすめ。

座標は、住所で検索せずに「google map」とかで検索してgoogle mapを開いて目的の住所を見つけて建物の上にクリック(1回だめなら2回)して、下か右に「座標」が表示されるのでそれをそのまま「Map center」に貼り付ける。

終了をクリックして更新(公開)をクリック、多分できるまでに何回もやらないといけないので、辛抱。




WordPress