WordPressへGoogleMap(グーグルマップ)の埋め込み方法を紹介!

WordPressへGoogleMap(グーグルマップ)の埋め込み方法手順の画像_9 ブログ運用
スポンサーリンク

先日、ブログ運営している友人と、ブログ運営について色々とお話をしていました。

お話をしている中で話題になったのは、

  • ブログのデータバックアップ
  • WordPressのテーマの種類
  • SEO対策
  • グーグルマップの埋め込み方法
  • 写真等の画像ファイルのモザイク加工

等についてでした。

写真等の画像ファイルのモザイク加工」はまとめ終わりましたので、今回は「グーグルマップの埋め込み方法」を紹介します。

画像付きの手順なので、誰でも簡単に作業できます!

【WordPressへGoogleMap(グーグルマップ)の埋め込み方法の手順書について】

  • 本手順の対象者:WordPressで運営しているブログやWebサイトにGoogleMap情報を表示させたい人
  • 前提条件:GoogleMap利用規約に同意
  • 設定時間目安:2分
  • 手順書作成日:2019年8月17日

【WordPressへGoogleMap(グーグルマップ)の埋め込み方法の手順書】

GoogleMap(グーグルマップ)のHTMLコード取得

GoogleMapへブラウザからアクセスし、GoogleMap情報を表示させたいエリア情報を選択します。

エリア情報検索フィールドには

  • 住所
  • 地名
  • 電話番号 等

を入力することで、ユーザーが探していると想定されるエリア情報を複数表示してくれます。

WordPressへGoogleMap(グーグルマップ)の埋め込み方法手順の画像_1

共有ボタンを押下します。

WordPressへGoogleMap(グーグルマップ)の埋め込み方法手順の画像_2

地図を埋め込むタブを押下します。

WordPressへGoogleMap(グーグルマップ)の埋め込み方法手順の画像_3

地図サイズのプルダウンメニューを選択します。

WordPressへGoogleMap(グーグルマップ)の埋め込み方法手順の画像_4

WordPressで運営しているブログやWebサイトに表示させたいGoogleMapサイズを選択します。

  • 小:400×300ピクセル
  • 中:600×450ピクセル
  • 大:800×600ピクセル
  • カスタム:縦×横ピクセルを自由に設定可
WordPressへGoogleMap(グーグルマップ)の埋め込み方法手順の画像_5

HTMLをコピーリンクを押下します。

WordPressへGoogleMap(グーグルマップ)の埋め込み方法手順の画像_6

WordPress投稿ページへGoogleMap(Googleマップ)のHTMLコードを貼り付け

WordPressの管理画面をアクセス後、GoogleMapを表示したい投稿記事を選択し、投稿記事フィールドの̟̟⊕を選択後、カスタムHTMLを選択します。

WordPressへGoogleMap(グーグルマップ)の埋め込み方法手順の画像_7

HTMLフィールドにGoogleMapのページでコピーしたHTMLコードを貼り付け(キーボード操作(Ctrl)+(C))、プレビュータブを選択します。

WordPressへGoogleMap(グーグルマップ)の埋め込み方法手順の画像_8

GoogleMapが表示されていることを目視にて確認します。

WordPressへGoogleMap(グーグルマップ)の埋め込み方法手順の画像_9

スマホで表示した場合のGoogleMapサイズ感もチェックしましょう。

その他にも画像付きの手順で「ブログのカスタマイズ方法」をまとめています。

誰でも簡単に出来るような手順作成を目指していますので、一読頂けると幸いです。

コメント