1分で出来る!Googleマップをブログに簡単に埋め込む方法(レスポンシブ対応)

ブログを見ているとGoogleマップが埋め込んであるのを見かけます。

 

自分もやってみたいと思いつつ、ググってもよくわからない。

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”]こんにちは~! 姫路のホームページ屋さん うえのです(@flexbox)です。[/speech_bubble]

 

 

専門知識は、まったくいりません(^^)

 

 

1分で埋め込める方法を書いてみます。

 

 

 

Googleマップを開いて、載せたい場所を検索

 

あらかじめ、ワードプレスの記事作成画面・Googleマップの2つを開いておくと、作業がスムーズ。

 

ここからGoogleマップを開いてください。

 

 

赤ワクがワードプレスの投稿画面 / きいろワクがGoogleマップ この状態で話を進めます。

 

 

 

 

神戸モザイクあたりの地図を埋め込みます

 

 

Googleマップは、開くと現在地付近の地図が出ます。

 

 

 

 

 

Googleマップの検索窓に「神戸モザイク」と入力して、虫めがね🔎マークをクリック。

 

 

 

 

 

 

モザイク付近の地図が表示されます。

 

 

地図の左上に、下の写真のように出ているとOK。

 

 

 

 

Googleマップから埋め込みコードをコピー

 

赤のワクでかこんだ「三」をクリック。メニューが出てきました。

 

 

 

 

 

 

メニューを下へ見ていくと「地図を共有または埋め込む」があります。ここをクリック。

 

 

 

 

 

下の写真の「地図を埋め込む」をクリック。

 

 

ここに長いコードが出てきました。

 

 

このコードの上にマウスを移動。右クリックで文字が青反転します。

 

 

 

 

そのままコピーをクリック。

 

 

ワードプレスへ移動しましょう。

 

 

 

ワードプレスのテキストモードでコピーしたコードを貼り付ける

 

 

 

テキストモードにして、地図を埋め込みたいところにマウスを移動。

 

 

 

右クリックして、「貼り付け」をクリック。

 

 

写真のようになります。

 

 

 

 

 

ビジュアルモードにすると、下のように地図が埋め込まれています。

下の地図は、実際に埋め込んでいます。右下の + や – で拡大・縮小します

 

 

 

 

もしも、上手くいかない場合。慌てなくても大丈夫。

 

 

 

 

[speech_bubble type=”drop” subtype=”R1″ icon=”pc-ueno.jpg” name=”うえのさん”]

テキストモードに貼ったコードを、消しましょう。

もう一度、Googleマップに戻ってコードをコピー。

同じ場所に貼ってください。

[/speech_bubble]

 

 

 

記事を更新して確認

 

 

ビジュアルモードで地図が表示されたら、「下書きとして保存」。

 

プレビューで確認。

 

 

 

 

 

 

[speech_bubble type=”drop” subtype=”R1″ icon=”pc-ueno.jpg” name=”うえのさん”] 表示されていたらOK! お疲れ様でした。[/speech_bubble]

 

 

 

スマホからはこんな感じで見えますよ(*^^*)

 

 

 

 

 

Googleマップを1分で埋め込める方法のまとめ

 

いかがでしたか!? 読んでいる時間は長かったですが、ビビるほど簡単です。

 

Googleマップを使う人が多いので、記事に地図があると読者には親切なサイトですね。

 

ぜひ活用してください。

 

[speech_bubble type=”drop” subtype=”R1″ icon=”pc-ueno.jpg” name=”うえのさん”]うえのでした。(@flexbox)[/speech_bubble]

 

 

 

耳より情報

ブログ記事でお話出来ない情報は、メルマガで発信しています。

例えば・・・

・HSP当事者が感じる生の声。

・HSCを持つ親が知りたい事。

・HSPと発達障害について。

その他、トピックス的情報など。

下のボタンをクリック

シェアありがとうございます

記事に関するご質問は、下のバナーからお問い合わせいただけます。

クリックすると、フォームが表示されるので気軽にご質問お願いします。

ABOUTこの記事をかいた人

HSPと知って、自分の感じてきた生きづらさを解放する方法を模索中。1日平均2,000UUのメディア運営の三年目。 ブログへ気持ちを書き出す事で双極性障害2型を克服しつつある。現在、家族関係のPTSDを治療中。スナップカメラマン。電王ファン。Perfume愛。 【詳しいプロフィールはこちらで~す