Web design

Google MAPをブログやホームページに埋め込む簡単な方法【コピペで完了】

投稿日:2018年11月27日 更新日:

Google MAPをブログやホームページに埋め込む簡単な方法【コピペで完了】
スポンサードリンク

こんにちは、ダイスケ(@desing_d)です。
GoogleMAPはみなさんご存知ですよね。
私の車は古くてカーナビが付いていないので、知らない所に行くときなどは大変役にたっております。

その、そのGoogleMAPをホームページやブログに貼り付ける事ができるのです!
え?知ってた?そうですよね〜結構何処のホームページやブログでも使っていますよね。

一見難しそうに見えるのですが、正直とても簡単でコピペで出来てしまうのです。
なので、今回はGoogleMAPをホームページやブログに埋め込む方法をご紹介します。

GoogleMAPで位置を調べる

まずは、Google MAPのサイトに行きます。

Google MAP

Google MAPの出し方

Google MAPのサイトに行くと、上記のようなページだと思います。
そうしたら、左上の検索欄に「表示させたい場所の名前、もしくは住所を打ち込みます」

Google MAP地図表示

上記のようになれば、検索完了です。
簡単ですね ( •̀ᄇ• ́)ﻭ✧

スポンサーリンク

GoogleMAPからHTMLコードをコピーする

さて、次はGoogle MAPからコードを取得してきます。

GoogleMAPからHTMLコードをコピーする

先ほどの検索したあとの画面の左上にハンバーガーみたいな3本線のメニューがあるので、そこをクリックします。

GoogleMAPからHTML

出てきたメニューの「地図を共有または埋め込む」を選んでください。

GoogleMAPからHTMLコードを取得

上記のようなページになると思いますので、まずタブを「地図を埋め込む」にしてください。
そのあと、「中」と出ている所をクリックすると・・・

・大
・中
・小
・カスタマイズ

と選べるようになっていますので、自分の用途にあったサイズをえらんでください。
そうしたら、最後に「HTMLをコピーする」でコードをコピーしてください。
あと少しで終わりです٩( 'ω' )و

GoogleMAPをホームページやブログに埋め込む

Google MAPにてHTMLコードをコピーできたらあとはペーストするだけです(笑)

先ほどの東京タワーのコード・・・

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975468365!2d139.743244215672!3d35.658580480199696!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1543063136711" width="750" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
このコードを、HTMLに貼り付けると・・・

このようになって、東京タワーを直ぐに確認できます!
簡単ですね\(^o^)/

Google MAPをブログやホームページに埋め込む簡単な方法まとめ

Google MAPをブログやホームページに埋め込む簡単な方法まとめ

いかがでしたでしょうか?
これで、ホームページやブログに簡単に地図を表示させる事ができるようになりましたね!

まぁ、あんまり地図を表示させる時ってないかもしれないですが、お店の紹介や会社の場所なんかですかね。
お店などは地図がないと不便ですし、あるに越した事もないので、是非表示させていみましょう!
それではノシ

スポンサーリンク

-Web design
-,

Copyright© Dデザイング , 2019 All Rights Reserved.