会社や店舗等の所在地を表示するのにGoogleマップを埋め込んでいるWebサイトって多いですよね。Googleマップは無料かつ少しの作業でサイト上に表示できます。
当記事では、下記のようなGoogleマップをWordPressサイトに埋め込む方法について解説します。
目次
Googleマップを埋め込む手順
通常のGoogleマップをサイト上に表示するだけなら下記の手順で埋め込めます。
Googleマップで住所検索
下記よりGoogleマップを開き、画面左上の検索フォームから表示したいマップの住所を検索してください。今回は大阪駅の住所を例に解説します。
目的地の埋め込みコードを取得
目的地の住所を探せたら共有ボタンを押します。
次に「地図を埋め込む」を選択します。
HTMLコードが生成されるので、「HTMLをコピー」を押して埋め込みコードを取得します。この時、「中」と書かれたボタンを押すとマップのサイズを選択することができます。
埋め込みコードの貼り付け
先程取得したHTMLコードをWordPressの各エディタに貼り付けるとマップが表示されるようになります。
- クラシック
- ブロック
クラシックエディタの場合は、テキストエディタに取得したHTMLコードを入力してください。
ブロックエディタでは、カスタムHTMLブロックを追加してHTMLコードを入力してください。
PCやスマホで綺麗に表示するには？
ただ貼り付けるだけでは、PCでもスマホでも幅が600pxで固定表示されてしまいます。HTMLコードの「width="600"」の部分です。デバイスに合わせてサイズが可変するようにしたいなら「width="100%"」と指定すればOKです。
ただ、上記の指定のみでは、縦幅（height）はPCとスマホで同じサイズのままです。そのため、スマホで見た際に地図が縦長に表示されてしまいます。
スマホ時の地図の高さを調整したい場合は、埋め込みコードを次のようなdivタグで囲んでみましょう。
<div class="map-container">
ここに地図の埋め込みコード
</div>その上で、次のCSSを適用します。TCDテーマならページ内のカスタムCSSにコピペしてお使いください。
/* スマホでは地図の高さを300pxにする */
@media (max-width: 768px) {
.map-container iframe {
height: 300px;
}
}スマホで見た際の地図の高さを任意に指定できるので、PC・スマホ問わず綺麗に表示可能です。
Googleマップのカスタマイズ
Googleマップをカスタマイズして埋め込む方法をご紹介します。
地図のサイズ変更
HTMLの一部を編集すれば、埋め込んだ地図のサイズを変更可能です。
デフォルトでは「width=”600″ height=”450″」となっているので、任意の数値に置き換えてください。
パーセンテージでの指定も可能です。
Googleマップを埋め込む箇所によってお好みでカスタマイズしてみてください。
ルート（経路）の表示
次のように目的地までのルート（経路）も表示可能です。
Googleマップで目的地を検索した後、「ルート・乗り換え」オプションを選択します。
次に、上部のアイコンから移動手段を選択し、最寄駅などのスタート地点を入力します。今回は徒歩で最寄駅スタートで設定しています。
複数のルートがある場合は、いずれかの「詳細」選択します。
すると次の画面が表示されますので、「共有アイコン」をクリックします。
ポップアップが表示されますので、「地図を埋め込む」からHTMLをコピーすれば、OKです。
店舗や会社までの案内地図に使えそうですね。
ストリートビューの表示
ストリートビューも簡単に埋め込めます。
実際の見え方に近い状態で埋め込めるので、目的地周辺の状況を把握しやすいかもしれません。
まずは目的地を検索後、写真を選択します。
次に下記箇所から「ストリートビューと360°ビュー」を選択します。
対応しているエリアであれば、複数のストリートビューが表示されます。
撮影時期や画角などから、お好みのものを選び、「︙」より「画像を共有または埋め込む」を選択します。
ポップアップが開くので、「地図を埋め込む」を選んでHTMLをコピーして埋め込めばOKです。
ストリートビューに対応しているエリアかつ、最新の情報なら利用してみるのもありですね。
まとめ
Googleマップは下記の手順でページに埋め込み可能です。
目的地の表示だけでなく、サイズ変更やルート（経路）表示もできるので、Googleマップは便利ですね。
店舗や会社までのわかりやすい地図があれば、ユーザーに親切ですし、サイトの実用性も上がります。
地図の配色の変更やマーカーのカスタマイズを行う場合は、Google Maps JavaScript APIの利用が必要になります。TCDテーマには、これらのAPIを使って下記のようなマップを表示できます。TCDユーザーの方はぜひご活用ください。（例：CURE）
なお、これらのAPIを使用するには、Google Maps Platformに登録してAPIキーを取得する必要があります。詳細な設定方法は下記に記載しておりますので、ぜひご覧ください。
Googleマップの色やマーカーなど、カスタマイズして使うにはGoogle Maps Platform APIキーを利用する必要があります。 Google Maps Platform APIキーの取得方法について解説します。TCDテーマのGoogleマップ表示機能を使用される方は、こちらのAP...
合わせて読みたいGoogleマップの関連記事
第1回 ：GoogleマップをWordPressサイトに埋め込む方法（当記事）
第2回 ：リッチなコンテンツを地図上に表示できるWordPressプラグイン「WP Google Maps」
第3回 ：「Googleマイマップ」で自分だけのオリジナルな地図を作る方法
コメント