Test for Google Map

google マップ テストGoogleMap

Google マップでの通常表示と、拡大表示での📍表示Test

通常表示

以下の手順でGoogle検索から作成したGoogleMapでは、近隣のライバルも同時に表示される

concrete5で作成するGoogleマップは、この問題をクリアしている。

ライバルを表示しないグーグルマップ欲しい人は他にいませんか?

Bingyahooではなく、Googleで「住所 名前」検索
② 検索結果のGoogleマップクリックします。
③「共有」を選択します。
④「共有」方法を選択するボックスが表示されます。「地図を埋め込む」を選択します。
⑤ 地図の「埋め込み」>HTMLをコピーします。
⑥ コピーしたコード「<iframe ~</iframe>」をカスタムHTMLブロック内にペーストします。
⑦ サイスを変更したい場合は、width値と height値を変更します。
※.準サイズは、width=”600height=”450“です。

  • 「小」横400px 縦300px
  • 「中」横600px 縦450px
  • 「大」横800px 縦600px
  • 「カスタムサイズ」大きさを入力

カスタムHTML 

⇧.上の指定では、住所表示等のポップアップが肝心のマップ表示を邪魔している
 (手紙を出す目的では無いので、〒表示や、都道府県名は不要、更に口コミ表示なども表示される場合があり(医療機関のサイトでは医療広告ガイドラインに抵触のリスク))width=”600″ height=”450″
但し、「地図を拡大」でも📍は外れない。
※.「google マップ APIキー」が不要で、誰でもが作成できるタイプであるが不十分

 ➡ concrete5の標準ブロックではこれらの問題をクリアしている。

拡大時に📍が外れるパターン(O)

⇧.拡大時に📍が外れて、目的地を見失う width=”800″ height=”600″

マイマップで作成したものの表示

通常の表示では以下のエラーとなり、表示できないが、

X-Frame-Options ポリシーによりブロックされました

www.google.com への接続中にエラーが発生しました。

このコンテキストへの読み込みを禁止する X-Frame-Options が設定されているため、このページの読み込みを中止しました。

WordPressのカスタムHTMLボックスからはどの様に表示されるかTest

 やはり、マイマップ機能で作成したコード「」をカスタムHTMLブロック内にペーストしでも、結果Errorとなり表示できない(スマホ表示:サファリブラウザではマップ部分が真っ白なブランク表示

※.有用なPluginが無いか?探して、見つかった場合は、ここに追記して確認してみる

WP Google Maps or WP Google Map

多分、WP Google Maps、理由は有効インストール数の値


WP Google Maps

バージョン: 8.0.25最終更新: 2週間前 有効インストール数: 400,000+WordPress バージョン: 3.5 またはそれ以上 検証済み最新バージョン: 5.4.2 PHP バージョン: 5.3 またはそれ以上 言語:16

WP Google Map

バージョン: 1.6.6 最終更新: 2週間前 有効インストール数: 30,000+WordPress バージョン: 2.9 またはそれ以上 検証済み最新バージョン: 5.4.2 PHP バージョン: 5.3 またはそれ以上 言語:5

他にも

WP Google Mapsの方が実績もあり(バージョンNoが大きい≒古くから存在しているから)対応言語数が圧倒的16vs5

この後、両方ともインストールして、使い勝手などを検証し、良いものを残す。
使わないプラグインは、無効化するだけじゃあなく削除する。

また、このプラグインは、WordPressの他の環境にはインストールしない。理由はあくまでTest・検証用の為であり、今のところ使う予定がないため。

①WP Google Map でテスト 確認

以下の手順で、設定、Googoleマップ設置、確認
✅WP Google Mapインストール

✅WP Google Map有効化
  ➡Google Map SRM
  ※.プラグインからWP Google Map設定でもGoogle Map Embed経由でも可

 以下のTabから設定
[All Map]

API Key and License Information

Enter API Key: [      ] ・・・・・ ここにGoogleMapのAPI Keyを入力します。
            [Save]・・・・・API Key入力後の保管
            [GET FREE API KEY]・・・・・GoogleMapのAPI Keyを持っていない人はここから入手することが出来る?
The API key may take up to 5 minutes to take effect

License Key: [                     ]・・・・・ここにWP Google MapのライセンスKeyを入力しする必要がある様です
            [Save]・・・・・ライセンス Key入力後の保管
                                            [GET LICENSE KEY]・・・・・ライセンスKeyを持っていない人はここから入手することが出来る?
  After payment you will get an email with license key・・・・・残念ながら、ライセンスキーを取得するために支払いが必要な様です。

よって、このプラグインは、無効化して使わないようにします。

※.無効化後に、完全に削除します。

✅ WP Google Maps を試してみる。

②WP Google Maps でテスト 確認

「WP Google Maps」のインストールとGoogle Map設定

以下の手順で、WP Google Map設定Googoleマップ設定を行う
✅WP Google Mapsインストール
✅WP Google Maps有効化

WP Google Map Settings

✅「Maps」からImportant Notificationの
2.Paste your API key here and press save: 「          」にgoogle マップ APIキーを入力「Save」する

✅「Maps」から
  ➡「Skip intro and create a map」をクリック
  ➡[My Maps]から「Edit」をクリック
  ➡[Choose a maps engine]から「Google Maps」をクリック & 「Select Engine」をクリック

  ➡Create your Map
   ➡「General Setting」

以下の項目をセット(プルダウンがある場合は選択)または入力する
Short code: “wpgmza id=”1 id=””の番号は、「Edit」の都度
  copy this into your post or page to display the map. Or click here to automatically create a Map Page now.
Map Name: [                  ]…マップ名(DFT:My first Map)

Width: 「    」… (横幅:DFT:100 %Set to 100% for a responsivemap
Height: 「     」 … (高さ:DFT:400 px
Zoom Level: 「スライダ設定」…ズーム:DFT:
Map Alignment: 「None」 …マップ整列:DFT:None
Map type: 「Roadmap」 …マップタイプ:DFT:Roadmap
               他にSitelite(衛星)、Hibrid、Terrain(地域)

各タブ「Markers」、「Advanced markers」、「Polygon」、「Polylines(折れ線)」、「Heatmaps」、「Circles」、「Rectangles(矩形)」から設定

「Markers」タブ

Address/GPS:「                                                                   」日本語の住所 名称入力も可
 ➡ 候補がプルダウンで表示される
  ➡ 候補をクリックして選択

Or right click on the map
Animation: 「None」 …アニメーション:DFT:None
  他にBounce、Dropがある。

InfoWindow open by default:「no」…:DFT:No、他にYes
インフォウィンドウを開くは、no:インフォウィドウは開かないにする)

「Add Marker」をクリック

Zoom Levelスライダを調整して、適度なマップ縮尺表示にする

「Save Marker」をクリック
「Save Map」をクリック

[Maps]のShortcodeのショートコード:wpgmza id=”1″
或いは、初回の「Edit」時のShort code:wpgmza id=”1″
コピーで確保する。

記事の編集

✅ダッシュボード>投稿一覧>

 ※.wp Google Mapsで作成したショートコードを利用する。

 ➡ 記事上に、ウィジエットショートコードブロックを追加し、

 ➡ ショートコード :wpgmza id=”1″を埋め込む

 .id=””の番号は、「Edit」の都度 上記「」は編集しています。元来は[]です。

ショートコード


※.残念ながら、複数のマップを作成する場合は、プロ版($39.99)が必要な様ですので、こちらも無効化して削除します。

結論

WP Google Maps も WP Google Mapも、複数のマップを作成したり、ライバルを表示しないなどの設定を行う場合は、有償版を使う必要がある様です。

コメント

タイトルとURLをコピーしました