Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

コーダー

グーグルマップ埋め込みをする簡単3ステップを紹介

投稿日:

Pocket

うも、チャーさんです。

 

あなたは、グーグルマップの埋め込みは、

どうやってやればいいのか?

と疑問を持っていませんか。

 

この記事では、グーグルマップの埋め込みの、

方法をステップバイステップで書いています。

 

 

なので、あなたがこの記事を読めば、

グーグルマップの埋め込みができます。

 

ちなみに埋め込み地図のサイズ変更の仕方も書いてますので、

サイズ変更もできるようになります。

 

なので、あなたがグーグルマップの埋め込みを、

したいならばこのまま読んでみてください。

 

 

スポンサードサーチ

グーグルマップの埋め込み3ステップ

 

で、まず結論からいきます。

 

グーグルマップの埋め込みをするには、

以下の3ステップです。

 

  1. 普通にまず検索する
  2. 次に共有をおす
  3. iframeのタグをコピペ

 

この3点です。

 

というわけで補足していきます。

 

普通にまず検索する

 

グーグルマップの埋め込みをするには、

まずは普通に地図で表示したい場所を、

検索しましょう。

 

というのもグーグルマップの埋め込みをするには、

一度表示したい場所を検索する必要があるからです。

 

 

なので、

以下の画像のようにあなたが表示させたい場所を、

検索して表示させましょう。

 

例 東京駅

 

 

共有をおす

 

で次に、グーグルマップで表示させたい場所を、

検索して表示させたら、共有というボタンがあるので、

そこをクリックしましょう。

 

で、この共有というボタンをクリックし、

地図を埋め込むというのをクリックすると、

グーグルマップを埋め込みのタグが出力されます。

 

なので、共有をまずクリックしてください。

 

 

iframeのタグをコピペ

 

で共有をおして、上記をするとタグが出てきます。

 

 

このiframeから始まるタグを全てコピーしてください。

 

ちなみにこのタグがグーグルマップを表示するための、

タグになります。

 

 

なので、コピーしたあとは、

あなたのサイトやwebページ上で、

表示させたい場所にこのタグをコピペしてください。

 

ワードプレスですと、

テキストエディタの中に記述しましょう。

 

 

例 ワードプレスのテキストエディタに記述

 

グーグルマップ タグの埋め込み

 

すると、記述をコピペした場所に、

グーグルマップが表示され、

埋め込み成功になります。

 

 

ちなみに参考になればと、

僕のサイトに埋め込みをしてみました。

 

例 東京駅 埋め込み

 

で、こんな風に、

 

  1. 普通にまず検索する
  2. 次に共有をおす
  3. iframeのタグをコピペ

 

をすればグーグルマップの埋め込みは完了です。

 

 

スポンサードサーチ

グーグルマップ埋め込みのサイズ変更の方法

 

で、このグーグルマップの埋め込みですが、

地図のサイズをあなた自身で自由に変えれます。

 

やり方は、コピペしたiframeのタグの中にある、

widthという場所と、heightという場所の数字を、

変えてください。

 

グーグルマップ タグの埋め込み

 

上記画像でいうと、下から3行目の、

右側にあるやつです。

 

 

こちらの数字を大きくすると、画面が大きくなり、

数字を小さくすると、埋め込み地図の画面が、

小さくなります。

 

ちなみにwidth=”100%”

とかも可能でして、そう指定すると、

親要素の横幅いっぱいまで広がってくれます。

 

 

なので、埋め込み時に、

サイズも変更したい場合は、

活用してください。

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

グーグルマップの埋め込みをするには、

 

  1. 普通にまず検索する
  2. 次に共有をおす
  3. iframeのタグをコピペ

 

 

この3点をやればokでして、

割と簡単にできるようになってるので、

あなたのページにも埋め込みを試してみてください。

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

-コーダー

スポンサードサーチ

関連記事

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

ファビコンの作り方「自作したい人向け」

どうも、チャーさんです。   あなたはあなたのサイト用に、 ファビコンを作りたい。 そう思ってませんか?   この記事ではファビコンの作り方を、 紹介してます。(自作方法を) &n …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

photoshopのスライスで不要な部分が保存されるのを防ぐ方法

どうも、チャーさんです。   あなたはphotoshopでスライスをした際に、 範囲選択した部分以外の不要なスライスが、 保存されてしまって困っていませんか?   この記事では、不 …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

webページにトップへ戻る機能をつける簡単な方法「2行書けばできます」

どうも、チャーさんです。   あなたはwebページにトップへ戻る機能を、 つけたいと思っていませんか?   この記事ではトップへ戻るを作る方法を、 紹介してます。   & …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。