WordPressのテーマビルダープラグイン「Elementor」のファンブログ

Googleマップウィジェット だけじゃない?!

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest
googlemapwm_thumbnail

Googleマップウィジェット 使ってますか?簡単にGoogleマップをページに反映する事ができる便利なウィジェット!使い方も簡単なのでぜひ使って見てください。

ただ・・・個人的にはウィジェットは使いません。

おじさん
おじさん
なんかいきなりブッ込んできたな・・・

そのお話はGoogleマップウィジェットの解説の後で。

Googleマップウィジェットの使い方①

gmw

Googleマップを好きな場所に好きなサイズ、倍率で表示する事ができます。

gmw_contents

設定できるコンテンツは3項目です。

Location

ここで、地図で示したい場所を設定します。検索方法としては、住所はもちろん、郵便番号・電話番号(Googleマップに登録されていれば)などでも検索および指定は可能です。直接地図上指定する事はできません。

ズーム

地図の拡大率といいましょうか、1〜20の間でスライダー設定する事が出来、1は大気圏から見た世界地図レベル。20は建物の屋上から見下ろしたレベル。

おじさん
おじさん
ちょっと・・・例えがわかりずらいっす。

わかりましたよ・・・

gmw_zoom1

上がズーム「1」で、下がズーム「20」です。

gmw_zoom20

 

高さ

今度は地図の表示領域のサイズを高さで設定出来ます。ちなみに横幅はカラム幅やセクションのコンテンツ幅、またはウィジェットのパデジングなどで調整します。

単位はおそらくピクセルのみの設定です。タブレット・モバイルと個別に設定する事が出来、レスポンシブデザインにも最適です!

Googleマップウィジェットの使い方②

gmw_style1

スタイルでコントロール出来るのは普通時とホバー時(オンマウス)のCSSフィルターのみです。

ですが、工夫次第では・・・

gmw_style3

Googleマップって意外とカラフルなので、サイトのデザインを邪魔する場合があるので、通常時をモノクロに設定し、ホバー(オンマウス)時にデフォルトのカラーにすると、スタイリッシュになるかも?!

gmw_style4

お好みで色々と調整してみて下さい。

詳細

もう1つ、ウィジェット共通設定項目として忘れてはいけないのが「詳細」ですが、ここは割愛します。

いつもの、大人の事情ね・・・(ぼそっ)
おじさん
おじさん

・・・そうですよ・・・大人ですよ〜

せいぜい使うとすると・・・パディングで幅を縮めたり、Motion effectで登場を演出したりくらいですかね?

一応、参考までにこちらの記事も。

Elementor で ホームページに動きを付ける

俺はHTMLウィジェットを使うんだ!

おじさん
おじさん
ぉぃぉぃ・・・いきなりどうした?

最初にチラッと言っていた、個人的にはGoogleマップウィジェットを使わない事に触れて行きます。と言ってももう答え言ってますけどね(笑)

Googleマップの埋め込み仕様を活かす

Googleマップには指定した地図を簡単にホームページに埋め込める様な仕様になっています。

googlemap1

Googleマップで表示したい場所や拡大率を設定し、これだ!と決まったら、赤枠の「共有」をクリックします。

googlemap2

次に「地図を埋め込む」のタブを選択し、サイズを選びます。またまた「これだ!」と決まったら、「HTMLをコピー」をクリックします。何も変化が無いのですが、しっかりとコピー状態になります。

HTMLウィジェットの登場!

htmlwidget

ウィジェット一覧の下の方にひっそりと佇むHTMLウィジェットをドラッグ&ドロップ!んで、先ほどのコピーされているであろう、Googleマップの埋め込みHTMLを編集画面にペーストします。

htmlw_googlemap

貼り付けた瞬間に地図がどど〜って。

おじさん
おじさん
ほぉ〜なるほど。

でしょ?なんかプログラミングっぽい事してる感でるっしょ?!

この方法でも地図を表示する事が出来ます。が、Googleマップウィジェットと違うのはElementorの編集画面ではコントロール出来ない事です。

おじさん
おじさん
えっ?Googleマップウィジェットの方が良いのでは?

ってなりますよね?

ここから何ですよ、オススメしたいのは。

Googleマップ応用術

gmsv

お分かり頂けただろうか・・・

Googleストリートビューが表示されている事を。

おじさん
おじさん
なんか心霊番組みたい・・・(ぼそっ)

そうなんです、Goolgeストリートビューも埋め込む事が出来るんです!
さらに・・・

gm_keiro

経路を検索して出た結果を埋め込めたり。

アイデア次第でいろんな事ができちゃうんです!

おじさん
おじさん
おぉ〜っ!!すごいですな。

まとめ

なんだか最後はHTMLウィジェットの話みたいになってしまいましたが、Googleマップウィジェットの解説でした。

HTMLウィシェットを使えば、埋め込み用のHTMLを吐き出せるサービスなら何でも貼り付けられます。InstagramやTwitter、YouTubeなどなど。

あと、埋め込み用HTMLを生成してくれる無料サービスもオススメです!

https://iframely.com/

意外とウィジェットに頼らなくても、なんとかなるもんですね。

多くの人にElementorを知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

もくじ

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。