こんにちは、プロクラスの中山です。
先日、といっても１ヶ月くらい前でしょうか。めちゃくちゃいい天気になりそうな日があったので高速バスで出雲に行ってみました！
写真は出雲大社の写真です。早朝に到着するので人が全然いなくて快適でした！
Googleマップは下記の通りです。
…と、こんな風に旅行が大好きな人はブログなどで残しておきたいという方も多いですよね。
または会社やお店のホームページを作られる方からも、ホームページ制作の授業の時に地図を埋め込みたいというご要望をよくいただきます。
授業の中でやり方をご案内することも多いのですが、こちらに設置を掲載しておきます！
ぜひチャレンジしてみてくださいね。
目次
サイトにGoogleマップを埋め込んでみよう
まずは埋め込みたい地図をGoogleマップで開きましょう。「出雲大社」のような観光名所であれば名称でGoogle検索すれば地図も出てきますね。
住所を打ち込んでGoogleマップを開こう
名称を入れても地図が出てこないような場所の場合は住所で検索してみてください。
地図が表示されればOKです！表示されたらこの検索結果に出てきた地図をクリックしましょう。
Googleマップの地図を「共有」
さぁ、地図をクリックしてGoogleマップが開きました。
まずは右下にあるプラスマーク、マイナスマークやマウスホイールの操作などで埋め込みたいサイズにズーム設定してください。
ズームの調整ができたら、「共有」のボタンをクリックしましょう。
「共有」を押すとURLが表示されますが、こちらはリンクだけなのでホームページに入れても地図を埋め込むことができません。
まずは「地図を埋め込む」をクリックしましょう。
↓
このHTMLをコピーして貼り付ければOK！なのですが、サイトのデザインに合わせてサイズを調整したりしたいですよね。その場合は「中」からサイズを変えていただくといいでしょう。
サイズを自分で指定したい場合は「カスタムサイズ」を選んで設定しましょう！
ちなみに、横幅がはみ出してしまう場合は自動的に調整してくれるので大きすぎるサイズを指定してしまっても大丈夫です。
ホームページにHTMLを貼り付けて地図を埋め込む
あとはHTMLをコピーして貼り付けるだけです！
ただし、WordPressを使用している人は「ビジュアルタブ」にそのままHTMLを貼り付けても地図が表示されないおそれがあるので、「テキストタブ」や「HTML」を入力できるモードにして貼り付けるようにご注意ください。
貼り付けたら、「ビジュアルタブ」に戻して確認してみましょう。
ちゃんと地図が表示されましたね！これでOKです。
自分のオリジナルマップを作ってみよう！
Googleマイマップを使えば、旅行で行ったスポットをまとめて保存しておくことも可能です。それぞれのルートを掲載したり、楽しみ方は無限大ですね。
行った場所の写真なども場所ごとに保存しておくことができます。
この地図も、作成した後にサイトに埋め込むためのHTMLを発行することができます。旅行ブログなんかにはぴったりですね。
このように、Googleの地図は気軽に皆さんのホームページにも埋め込むことができるのでとても便利です。
ブログやホームページをお持ちの方はぜひ一度使ってみてくださいね！