WordPressでサイトを立ち上げて、地図を埋め込む時の制作方法基礎編です。
このページでは、グーグルマップからタグを取得し、ページに埋め込む方法と、より引いた地図・より寄った地図に変更したい場合の方法を解説します。
グーグルマップからタグを取得する
パソコンのブラウザで「グーグルマップ」にアクセスし開きます。
そして、地図を掲載したい住所を入力すると画面右側に地図が表示されます。
この例では大阪ですが、その地図のタグを取得するために「共有」をクリックします。
別画面が表示されますので、「地図を埋め込む」から、サイズを適宜選んで（この例では中サイズ）「HTMLをコピー」をクリックします。
WordPressサイトに地図を埋め込む
WordPressサイトの地図を埋め込みたいページを管理画面で設定します。
該当ページの作業画面から、「メディアを挿入/編集」をクリックします。
別画面が立ち上がりますので、「埋め込む」を選択し、コピーしたコードをはりつけてください。そして「OK」をクリックします。
これで実際に、新規ページに地図が埋め込まれました。
場所に問題がないか、確認してください。
プレビューで確認し、実際の地図の表示に問題がないか確認しましょう。
問題なければ公開してください。
もっと寄り・引きで地図を表示したい場合
もう少し周辺を入れたい、もっと建物の近くの地図に変更したい・・という時はありませんか？
このときの手順について解説します。
もう一度、グーグルマップにアクセスし住所を入力します。
そして、地図右下の拡大縮小で好みのサイズに変更してください。この例では、引きの地図に変更し、周辺地域を多く入れこんだ例です。
あとはページに埋め込むためのタグを取得します。
サイトに貼り付けます。
引きの地図が埋め込まれたことを確認してください。
まとめ
このように、とても簡単にグーグルマップを埋め込むことができますので、より分かりやすいサイト作成の参考になさってください。
この記事を書いた著者
- ITサポート/コンサルティング/コンテンツプロデュース
- 株式会社ストレン 代表取締役社長
MCP,2級知的財産管理技能士
GAIQ(Googleアナリティクス個人認定資格)
【仕事略歴】早稲田大商卒。東証一部精密機器メーカー、レコード会社を経て独立後、2001年に動画配信（ストリーミングサーバー）レンタルサービス「ストレン」を立ち上げ、マイクロソフト認定パートナーとしてサーバー構築・運用からPRまで全般に携わる。2015年、東証マザーズ上場企業・お客様と合意のもと、上場企業サービスへ移行していただき同ビジネス終了、以降はITサポート・コンサルティングとして企業の支援に。
当サイトでは、ホスティングビジネスの経験を踏まえ、ユーザー視点でレンタルサーバーやECサービスの評価をし、これから始めたい・切り替えたい方の立場に立った記事・評価・比較情報をお届けします。
【趣味】プロ野球/MLBなどスポーツ、そして映画・音楽好き（主に洋楽）。
