ブログ

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

2020年12月18日

 

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

 

悩む女性
GoogleMapをブログに張り付けたいのだけどどうしたらいいの?

 

悩む男性
GoogleMapって見るだけじゃないの?

 

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

 

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

ムロです。ブログを始めて1年(2019年6月)ぐらいで、4つのブログを運営しています。

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

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

 

 

 

こんな方におすすめ

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

 

 

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

 

 

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

 

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

 

コチラも読まれてる人気記事です

 

>>【ブログは稼げる】副業ブログを始めると実際どんなメリットがあるの?デメリットはあるの?

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

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

 

 

 

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>
 

 

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

 

 

 

ムロ
カンタンでしたね!!

 

 

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

 

Googleストリートビューも埋め込める

 

これもめちゃ簡単です。

 

 

『六本木ヒルズ』のGoogleストリートビュー

 

step
1
Googleマップで「場所」を表示

Googleマップで「場所」検索してください。

すると、左側にいくつかの写真サムネイルが表示されます。

この写真を、どれでもいいので選択してください。

 

 

step
2
埋め込むGoogleストリートビューを選択

 

 

 

step
3
共有・埋め込みウィンドウを表示

 

 

 

場所表示の右側に●が縦に3つ並んだボタンがあります。

 

ここをクリックして下さい。

 

step
4
埋め込みタブを選択

 

 

 

 

埋め込む画像サイズを選択できます。HTMLをコピーしてテキストに貼り付けをして完了。

 

 

ココがポイント

埋め込みサイズ表

「小」 横:400pixel,  縦:300pixel
「中」 横:600pixel,  縦:450pixel
「大」 横:800pixel,  縦:600pixel

 

 

 

まとめ:GoogleMapとストリートビューをホームページやブログに埋め込む方法

 

GoogleMapとGoogleストリートビューを、ホームページやブログに埋め込むことで、屋内の様子を、たくさんのお客様に見て頂くことができます!

 

ぜひ、ホームページやブログで有効活用してください!

 

 

アフィリエイトで稼ぐためのおすすめの本はこちら

>>【ブロガー必見】Webマーケティングを学ぶならこの本を読め!初心者向けの10選

 

リアルな環境で学んで頂けるアフィリエイトを学ぶ"本物の講座’’

>>ゼロからスタートして1ヶ月後に月収5万円。【アフィリエイト講座】アフィLab

 

最強のブログテーマAFFINGER5

>>WordPressテーマ 「WING(AFFINGER5)」多くのブロガーに愛されているテーマ

 

集客ツールワードプレス、フェイスブック、ブログを単体で運用していて、十分に集客できている方は、アメプレスは不要かもしれません。

>>インターネット総合集客ツール アメプレスProは1日100円で集客できる

 

  • この記事を書いた人
  • 最新記事

ムロ

サイト管理人のムロです。 【趣味のブログがいつの間にかお金を稼いでくれた】月間10万PV達成 ➡️8ヶ月でブログ収益は月20万円 ➡️ 本業と副業で年収は1000万超え➡️ブログでは、SEO・アフィリエイト・動画配信・AFFINGER・転職について書いていますので、よろしくです!!

人気記事一覧

1

  転職サイトの大手3社をまとめて紹介します。   リクナビ、マイナビ、doda   転職したい人でも、どこのサイトに登録したら良いの迷いますので。   それぞ ...

2

悩む男性アフィリエイトで稼ぐコツが知りたい。いま、個人ブログを運営しているけど月1,000円未満です・・月5万円を目指したい。   悩む女性収益化するためには、どうしたらいいですか? &nb ...

3

  悩む女性個性的なブログはアクセスあるの?   悩む男性ブログの独自性ってどうすればいいの?   悩む男性オリジナリティって一体なに?     こん ...

4

悩む男性ブログの書き方がわかりません、どうすれば良い記事が書けるようになるんでしょうか   悩む女性ブログの構成ってどのようにづればいいいですか?   悩む男性どのように書けば読ま ...

-ブログ

© 2021 MURO BLOG Powered by AFFINGER5