No Codes / No Templates / The Idea is.

WordPress(ワードプレス) ドラッグ&ドロップ Webサイトビルダー

Google Map 設定

「weluka グーグルマップウィジェット」ではグーグルマップの埋込・表示設定を行うことができます。

Google Mapを埋め込むには「Google Map APIKey」が必要です。取得・設定方法は下記をご参照ください。

「ドラッグウィジェットメニュー」の「Appsアイコン」クリック ⇒ 「グーグルマップ」をドラッグ&ドロップで配置します。

配置された「グーグルマップウィジェット」をクリックし表示される水色枠の「編集」をクリックすることで、「グーグルマップ設定画面」が表示されます。

一般設定

「住所」
マップ取得したい住所を入力します。
「Information」
マーカー吹き出し表示内容を入力します。空白の場合は住所が表示されます。
「緯度」
住所ではなく、緯度経度でマップ取得したい場合、緯度を入力します。
「経度」
住所ではなく、緯度経度でマップ取得したい場合、経度を入力します。
「Width(px)」

マップ表示横サイズを入力します。基本単位はピクセルとなりますが%(パーセント)で指定したい場合は%まで入力してください。

例)960pxにしたい場合、960と入力します。

「Height(px)」
マップ表示縦サイズを入力します。単位はピクセルとなります。例)400pxにしたい場合、400と入力します。
「Zoom Level」
マップ初期表示縮尺を選択します。
「Static Map Width (px)」
画面サイズよりマップを画像表示したい場合、画像表示に切り替えたい画面サイズを入力します。単位はピクセルとなります。例)480px以下の場合に画像表示したい場合、480と入力します。
「マウスでのスクロールを不可にする。」
マップをマウスでスクロールしたくない場合はチェックしてください。

Style 設定

Google 公式が提供している「Styled Maps Wizard」でカスタマイズ(色など)したマップのJsonコードを設定ことができます。

「Google Map Styled Maps Json Code」
Google 公式が提供している「Styled Maps Wizard」でカスタマイズ(色など)したマップのJsonコードを入力(貼り付け)します。

高度な設定

グーグルマップコンテンツラッパー(メニューコンテンツの外側)の余白、枠線(ボーダー)、css class名の設定を行います。

「Border Size(px)」

マップコンテンツラッパーに枠線を表示したい場合、枠線サイズを設定します。単位はピクセルとなります。

例)2pxの枠線を設定したい場合、2と入力します。

「Border Style」

マップコンテンツラッパーに枠線を表示したい場合、枠線スタイル(css)を選択します。

例)実線を設定したい場合、solidを選択します。

「枠線色」
マップコンテンツラッパーに枠線を表示したい場合、枠線色を設定します。クリックすると「カラーピッカー」が表示されます。
「Margin(px)」

マップコンテンツラッパーのマージン(上下左右)を設定します。単位はピクセルとなります。

例)TOP(上)に30pxのマージンを設定したい場合、「Top」に30と入力します。

「Padding(px)」

マップコンテンツラッパーのパディング(上下左右)を設定します。単位はピクセルとなります。

例)TOP(上)に30pxのパディングを設定したい場合、「Top」に30と入力します。

「Css Selectors Class」

マップコンテンツラッパーのcss class名を設定します。

Custom Cssに設定することで表示のカスタマイズが行えます。Custom Cssについては「welukaテーマ設定」を参照ください。

例)googlemapというclass名を指定したい場合、googlemapと入力します。複数のclassを設定する場合は半角スペースで区切ってください。

Custom Css 設定例

.googlemap { padding: 30px !important; }

設定画面終了

「保存」ボタン
画面を閉じる。設定内容をビルダー上に反映します。
「閉じる」ボタン
画面を閉じる。設定内容をビルダー上に反映しません。