1. 記事・ページの投稿
  2. Googleマップを表示させる方法

Googleマップを表示させる方法

Googleマップを投稿や固定ページに表示させる方法を紹介します。簡単な手順でページ内に地図を挿入できます。ルート案内付きの地図も埋め込むことができます。

Googleマップをサイトに埋め込む方法

Googleが提供する無料の地図サービス「Googleマップ」は、地図を簡単に共有できる仕組みを備えています。その一つが、コードを貼り付けるだけでサイトに地図を表示できる、「埋め込み」機能です。

Googleマップを埋め込む手順

GoogleマップをWordPressのサイトに埋め込むために必要な作業は、

  1. 目的の地図を表示させる
  2. 埋め込みコードをコピーする
  3. 記事編集画面で貼り付ける

と、とても簡単です。順に見ていきましょう。

Googleマップを埋め込む手順①
目的の地図を表示させる

Googleマップにアクセスして、目的地を検索します。下のように候補が表示された場合は、その場所をクリックします。

Googleマップ 目的地を検索
Googleマップで目的地を検索

目的の地図を表示できました。

Googleマップ 目的の地図を表示
Googleマップで目的の地図を表示

Googleマップを埋め込む手順②
埋め込みコードをコピーする

地図の左側にある「共有」をクリックします。

Googleマップ 共有ボタン
「共有」をクリック

地図を埋め込む」をクリックします。

Googleマップ 地図を埋め込む
「地図を埋め込む」をクリック

画面左上の▼をクリックすると、地図のサイズを選択できます。

Googleマップ 地図サイズの選択

それぞれのサイズを選択したときの地図の大きさは、次の通りです。

Googleマップ サイズ(単位:px)
サイズ 高さ
400 300
650 450
800 600
カスタムサイズ 任意 任意

サイズを選択できたら、埋め込みコードをコピーします。

Googleマップ 埋め込みコードをコピー

Googleマップを埋め込む手順③
WordPressの記事編集画面で貼り付ける

ここからは、WordPress管理画面での作業です。地図を表示したい投稿(あるいは固定ページ)の編集画面を開き、テキストモードに切り替えます。

WordPress記事編集画面でテキストモードを選択
編集画面でテキストモードを選択

先ほどコピーした埋め込みコードを、本文入力欄に貼り付けます。きちんと表示されるかどうか確認するため、プレビューをクリックしてみましょう。

Googleマップ 埋め込みコードを貼り付け

Googleマップをサイトに表示することができました。

Googleマップ 埋め込み完了

ここまで、Googleマップの標準機能を利用した地図の埋め込み方法を紹介しました。しかし、この方法には、

  • 地図をいくつも埋め込むには手間がかかる
  • 大きい地図が画面に入りきらない
  • 地図が画面スクロールの妨げになる

などの欠点があります。これらを回避するには、Simple Map(Googleマップ埋め込みプラグイン)が便利です。


道順案内付きの地図を埋め込む方法

Googleマップには、出発地から目的地までの道順(ルート)を表示する機能があります。このルート案内を表示した地図を、サイトに埋め込むことができます。

Googleマップ ルート案内機能

道順案内付きの地図を埋め込む手順①
出発地と目的地を入力

検索フォーム右側の「ルート」ボタンをクリックします。

Googleマップ 「ルート」ボタン
「ルート」ボタンをクリック

例として、[浅草寺]から[東京スカイツリー]へ[徒歩]で行くルートを表示させてみます。

Googleマップ 出発地と目的地を入力
出発地と目的地を入力/交通手段を選択

道順案内付きの地図を埋め込む手順②
埋め込みコードをコピー

画面左上の「メニュー」ボタンをクリックします。

Googleマップ ルート案内メニュー
「メニュー」ボタンをクリック

「地図を共有または埋め込む」をクリックします。

「地図を共有または埋め込む」をクリック
「地図を共有または埋め込む」をクリック

ここから先は、[Googleマップを埋め込む手順②および③]で紹介した方法と同じです。

道順案内付き地図の埋め込みコード

おすすめの書籍

小さなお店&会社の WordPress超入門

WordPressでビジネスサイトを作るために必要な、基本的な知識が理解できる“超”入門書。Web制作に必要なHTML・CSS・PHPなどの専門知識がなくても読み進められる1冊です。SEO(検索エンジン最適化)やセキュリティの対策についても解説されています。

おすすめのテーマ

WordPressテーマ「NEXTAGE (tcd021)」

WordPressテーマ「LAW」

コーポレートサイト(企業サイト)向けのテーマ。第一印象で信頼性や専門性を的確にアピールし、Webサイトのゴールである「お問い合わせ」まで自然に繋がっていく“導線”にこだわったテンプレートです。

カテゴリー

ビジネスサイトを作りたいあなたに

おすすめのテーマ、あります。