WordPressのブロックエディタ拡張:Getwidについて解説(12)Google Maps

タナビーの高梨です。

今回はGetwidのToggleブロックに関する設定を解説していきます。

全般設定についてはこちらをご覧ください。

Google Maps概要

Google Mapsブロックとは、公式ページからの引用では、

シンプルなGoogleマップに、無制限のカスタムマーカーを埋め込むことができます

公式ページ(翻訳 by DeepL先生)

だそうです。

さっそく見ていきましょう!

ブロックの設定

ブロックの設定の前にまずはGoogle Map APIキーを取得して入力する必要があります。

取得方法についてはここでは触れませんので、ググってみてください。

ブロック設定はタブが2つあります。

  • General
  • Style

それぞれ解説していきます。

Generalタブ

Settings

Zoom & Pan Interaction:「Prevent zoom on page scroll」「Disable zoom and pan」「Enabel zoom and pan」から選択します。

「Prevent Zoom on page scroll」は地図上でマウスホイールを回したときに、Ctrl+ホイールでズームできますよ、と表示されるあれですね。

「Disable zoom and pan」はマウスホイールでのズームを一切受け付けません。

「Enable zoom and pan」は何の警告もなく地図上で普通にマウスホイールによるズームが効くモードです。

Map Center & Zoom

zoom:最初に表示されるzoomの倍率を数値で設定します。1がもっとも広角(世界地図に近い)で、数値が大きくなるほどズームアップした状態になります。

Center Latitude:最初に表示される位置の緯度を数値で設定します。

Center Longitude:最初に表示される位置の経度を数値で設定します。

Google Maps API Key:Google Maps APIキーを設定できます。上述の通り、設定にたどり着くまでにAPIキーを入力する必要があるため、変更する場合のための設定だと思います。一応、Deleteもできるようです。

Styleタブ

Map Height:地図表示領域の高さをpxで設定します。最小100px~最大1080pxまでです。

Show Zoom:オフにすると右下のZoom用プラス印とマイナス印が非表示になります。

Show Map Type:オフにすると航空写真とかの選択ができなくなります。と思うのですが、実は私の環境ではオンにしても選択する表示がなくて選択できない状況です。課金をしていないからかもしれません。どなたか真相が分かれば教えてください。

Show Street View:オフにするとストリートビューができなくなります。と思うのですが、実は私の環境ではオンにしてもストリートビューを選択する表示がなくてできない状況です。課金をしていないからかもしれません。どなたか真相が分かれば教えてください。

Show Full Screen:オフにすると右上の全画面表示マークが非表示になります。

Map Style:地図の色合いなどを変更することができます。「Default」「Silver」「Retro」「Dark」「Night」「Aubergine」「Blue Water」「Ultra Light」「Dark Silver」「Shades of Grey」「No Labels」「Wild West」「Vintage」「Wireframe」「Light Dream」「Custom」から選択できます。「Custom」を選択するとさらにJSONによるカスタム設定ができるようになり、より細かい設定が行えます。

まとめ

設定個所は以上です。

普通にGoogleマップを埋め込むよりもAPIを使うのでより細かい設定ができますね。