【簡単】GoogleMapとストリートビューをホームページやブログに埋め込む方法を紹介

2020年12月18日 2021年4月4日

悩む男性

お店や場所をブログで紹介したいのだけど、地図をどうやって紹介したらいいの？

悩む女性

GoogleMapをブログに張り付けたいのだけどどうしたらいいの？

悩む男性

GoogleMapって見るだけじゃないの？

こんな悩みにお答えしていきます。

この記事を書いている人はこんな人

ムロです。ブログを始めて１年（２０１９年６月）ぐらいで、４つのブログを運営しています。

8ヶ月で収益化しました最高月収は25万で、アベレージは20万ぐらいです。

PVは大体10万PVぐらいですね。ツイッターは(@hittky1114)

こんな方におすすめ

サイトやブログに地図を入れ込むやり方を知りたい
Google Mapを使いこなしたい
Googleストレートビューを使いこなしたい

今回は、Googleマップをホームページやブログに埋め込む方法について解説いたします。

ホームページやブログにGoogleマップを埋め込むことで、会社やお店までのアクセス方法が分かりやすくなります！

埋め込みはカンタンなので、HTMLの知識がちょっとあれば大丈夫です！

＞＞【ブログ構成・書き方】を初心者向けに解説！ブログの書き方＆構成のポイント

＞＞【徹底解説】ブログの仕組みと、初心者がブログで１万円を稼ぐまでを紹介【誰でも稼げます】

もくじだよ

1 GoogleMapをブログに埋め込むのはカンタン
2 GoogleMapをブログに埋め込むやり方
- 2.1 『東京タワー』を地図に埋め込んでみます
3 Googleストリートビューも埋め込める
- 3.1 『六本木ヒルズ』のGoogleストリートビュー
4 まとめ：GoogleMapとストリートビューをホームページやブログに埋め込む方法

GoogleMapをブログに埋め込むのはカンタン

『東京タワー』を、このブログに埋め込んでみます。

ムロ

仕上がりはこんな感じ

GoogleMapをブログに埋め込むやり方

瞬殺で終わりますので、ぜひ覚えておきましょう。

『東京タワー』を地図に埋め込んでみます

step
1埋め込みたい場所を、Googleマップで表示します

まず、Googleマップで、ホームページやブログに埋め込みたい場所を表示しましょう！

ここでは、『東京タワー』と入力しました。

step
2「共有」マークを押します

つぎに、共有マークをクリックします。

共有方法が選択できます。

『地図を埋め込む』を選択しましょう。

step
3地図の大きさを調整します。

埋め込む地図の縦横サイズを決めましょう。

『小』『中』『大』『カスタムサイズ』の4種類から選択できます。

今回は『中』を選択します。

ココがポイント

『小』…横400px　縦300px
『中』…横600px　縦450px
『大』…横800px　縦600px
『カスタムサイズ』…自由に数字を入力

step
4『HTMLコード』をコピーします

[/] shortcode<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975472314!2d139.74323885074907!3d35.658580480102415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1607470057426!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

ブログのテキストにコードを貼り付けする。

ムロ

カンタンでしたね！！

ついでに、ストレートビューも