店舗や企業などのホームページでは、所在地の地図を載せるのはほぼ必須だと思います。ワードプレスでホームページを自作して、どうしたらいいのだろう?という方のために、ご自身のサイトにGoogleマップを埋め込む方法をご紹介させていただきます。
Contents
Googleマップとは
Googleマップは、グーグルが提供している地図情報サービスで、ほぼ全世界の地図データ、航空写真が取り込まれています。
これらの地図情報は、個人・企業に関わらず無償で公開・提供されているので、だれでも無料で活用することができます。
Googleマップを埋め込む流れ
- Googleマップにアクセスして場所を検索
- 地図のHTMLコードを生成、コピーする
- 自分のサイトにHTMLコードを貼り付ける
流れとしてはこれだけですので、非常に簡単です。
1.Googleマップにアクセスして場所を検索
こちらのURLにアクセスして、右上の検索欄に住所または施設名を入力します。
Googleマップ:https://www.google.co.jp/maps/
2.地図のHTMLコードを生成、コピーする
検索した住所の地図が表示されたら、「共有」をクリックします。
「地図を埋め込む」をクリック。
「HTMLをコピー」をクリックすると<iframe …のHTMLコードがコピーされます。
3.自分のサイトにHTMLコードを貼り付ける
今度は、ご自分のWordPressサイトの貼り付けたいページの編集画面に行って、コピーしたHTMLコードを貼り付けます。
固定ページか投稿ページの編集画面で、ブロックの追加をクリックし、「カスタムHTML」をクリックします。
そこに先ほどのHTMLコードを貼り付ければ完成です。
実際にホームページを表示してみて、正常に地図が表示されていれば完成です。
まとめ&サイズの調整方法
Googleマップの埋め込みは、やり方はとても簡単ですのでお勧めです。
ちなみに地図のサイズを変えたい場合は、下の赤枠で囲った、width=”横幅px”、height=”高さpx”、の数値を変えればOKです。
地図の表示をコンテンツ幅いっぱいにしたい場合は、width=”100%”にしてください。