Google マップでの通常表示と、拡大表示での📍表示Test
通常表示
以下の手順でGoogle検索から作成したGoogleMapでは、近隣のライバルも同時に表示される
concrete５で作成するGoogleマップは、この問題をクリアしている。
① Bingやyahooではなく、Googleで「住所 名前」検索
② 検索結果のGoogleマップをクリックします。
③「共有」を選択します。
④「共有」方法を選択するボックスが表示されます。「地図を埋め込む」を選択します。
⑤ 地図の「埋め込み」＞HTMLをコピーします。
⑥ コピーしたコード「<iframe ～</iframe>」をカスタムHTMLブロック内にペーストします。
⑦ サイスを変更したい場合は、width値と height値を変更します。
※．標準サイズは、width=”600” height=”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も、複数のマップを作成したり、ライバルを表示しないなどの設定を行う場合は、有償版を使う必要がある様です。
コメント