当記事ではGooglemaps(グーグルマップ)をサイトやブログに埋め込む方法を図解を入れながら分かりやすく解説していきます。
場所の詳細を紹介するにあたって
- 会社やお店のホームページにGoogleマップを入れたい
- アメブロやwordpressブログにGoogleマップを入れたい
という場合に役に立ちます。とても簡単に出来ますので一緒にやっていきましょう。
Googleマップをサイトやブログに埋め込む方法
それでは、僕の故郷である新潟で大好きな麻婆ラーメン店の「ラーメン工房 まるしん」をこのブログに埋め込んでいきます。手順を細かくお見せしていきますね。
STEP1：Googleマップで該当場所を表示させよう
まずはGoogleマップにアクセスしてサイトやブログに埋め込みたい場所を検索して表示させます。
公式ページ：Googlemaps
上記検索窓に埋め込みたい場所の「施設名」「店名」「住所」「電話番号」のいずれかを入力します。すると地図上に赤いピンが刺さります。
STEP2：埋め込む地図のコードをコピーしよう
サイトやブログに地図を埋め込むには英数字が羅列された「コード」を入手する必要があります。手順は以下です。
「共有」をクリックします。
「地図を埋め込む」をクリックします。すると下に漢字一文字とコードが表示されます。感じ一文字の部分をクリックすると地図のサイズを選ぶことが出来ます。
地図の大きさは「小」「中」「大」「カスタマイズ」の4種類。それぞれ好きなサイズを選択します。
「小」…横400px 縦300px
「中」…横600px 縦450px
「大」…横800px 縦600px
「カスタムサイズ」…自由に数字を入力
ブログの場合は「中」が使われていることが多いです。各サイズがどれくらいのサイズになるのか全てのサイズを埋め込んでみたので参考にしてみてください。
Googleマップ「小」サイズ
小さすぎてどこにピンが刺さっているか見えないことが多いです。
Googleマップ「中」サイズ
ブログで使われている事が多いサイズ。
Googleマップ「大」サイズ
スマホで表示した時に地図が邪魔でスクロール出来ない煩わしさがある。
地図の大きさを好きなサイズにしたい時は「カスタマイズ」を選択して数字を入力します。
表示される地図が近すぎたり遠すぎる場合は、右下にある「＋」「ー」でズームレベルを調整可能です。
地図のサイズとズームレベルを選択したら「埋め込みコード」をコピーします。コードは以下です。
<iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3149.887861248309!2d139.0839539505717!3d37.86291421475778!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5ff4cf2396239b05%3A0x80137d64294e5537!2z44Op44O844Oh44Oz5bel5oi_IOOBvuOCi-OBl-OCkw!5e0!3m2!1sja!2sjp!4v1541913612333″ width=”600″ height=”450″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
STEP3：コードを貼り付けよう
次にコピーしたコードをサイトやブログに貼り付けます。wordpressなどのブログに貼り付ける際は「テキスト」に貼り付けます。
記事編集画面を「テキスト」入力にします。
コピーしたコードを貼り付けます。
「ビジュアル」をクリックするとGoogleマップが表示されます。このように表示されない場合はどこかの手順が間違っているので、最初からやり直してみてくださいね。
これで公開すればサイトやブログにGoogleマップが表示されます。この記事で表示されているGoogleマップは上記方法で埋め込んでいます。
経路付の地図を埋め込む方法
Googlemapsでは上記のような経路付きの地図をサイトやブログに埋め込む事も可能です。やり方はとても簡単。
Googlemapsの検索窓に調べたい場所を入力します。その後「ルート・乗換」をクリックします。
◯印の欄に出発地。ピン印の欄に到着地を入力後、左上の三本線をクリックします。
「地図を共有または埋め込む」をクリックします。
地図を埋め込むタブを選択するとHTMLが表示されるのでコピーします。
その後の流れは「STEP2：埋め込む地図のコードをコピーしよう」と同じです。
Googleマップをリンクで埋め込む方法
Googleマップの地図をそのまま埋め込むのではなく、Googleマップで指定した場所にピンが刺さった状態のリンクを貼りたい場合も解説しておきます。とても簡単です。
表示させる場所を検索して「共有」をクリックすると「リンクを送信する」という項目が表示されます。その下に「共有リンク」がありますので、URLをコピーしてサイトやブログに貼り付けるだけです。
URLをそのまま貼り付けると「https://goo.gl/maps/xh8W31Jth4z」となりますし、テキストリンクにすると「Googleマップで見る」と変えることも可能です。
他にもGoogle＋、Facebook、Twitterにそのまま共有出来たりしますので、ケースバイケースで活用してみてください。
経路付きのGooglemapsをテキストリンクで貼り付けすることも可能です。
まとめ
サイトやブログにGoogleマップが埋め込まれていると、検索ユーザーにとってはかなりありがたいですが、スマホのGoogleマップアプリに飛びたい人もいます。
なので、サイトやブログに貼り付ける際は、地図の埋め込みとリンクの両方を貼り付けておくと喜ばれやすいですよ！
