ホームページ上にGoogle地図を表示

会社やお店のホームページで、
地図を表示させたい場合があります。

 

そんな時に、Googleの提供しているGoogleMapを利用すれば、
ホームページ上に簡単に地図を掲載することができます。

 

地図の画像を作るより簡単です。

 

例えば、お問い合わせフォームの下に
地図を表示させることにします。

 

 

HTMLタグ上でお問い合わせフォームの下に、
GoogleMapでで生成したタグを貼り付けると、
地図を表示させることができます。

 

 

例えば、東京スカイツリーの周辺地図を表示させてみます。

 

まずGoogleMapのページにアクセスします。

 

 

画面左上の検索欄に「東京スカイツリー」と入力して、
虫めがねをクリックして
「東京スカイツリー」を検索します。

 

場所を検索しても出てこない場合は、
住所を入力すれば確実です。

 

 

画面左下の「＋－」をクリック（青枠）すると
拡大縮小されますので、
掲載する拡大率を調整してください。

 

検索窓の左にあるアイコン（赤枠）をクリックすると
ショートメニューが出ますので、
「地図を共有または埋め込む」をクリックします。

 

 

すると、画面左にメニューが開きます。

 

「地図を共有または埋め込む」をクリックします。

 

 

すると、ウィンドウが下のように変わります。

 

 

ウィンドウの左のメニューを開いて掲載する地図の大きさ（大、中、小、カスタム）を決めます。

 

 

生成されているタグ（赤枠内）を選択して、
選択されたタグの上にマウスカーソルを当てて、
右クリックして、「コピー」をクリックします。

 

 

HTMLタグ上でお問い合わせフォームの下に「貼り付け」します。

 

 

スマホサイトなどで横幅に制限がある場合は、width="○○○px";をパーセント表示に書き換えます。

 

 

出来上がりは、こんな感じです。

 

 

シリウスで作ったホームページに表示させる場合は、
記事の中に生成したタグをコピーするだけでOKです。

 

 

出来上がりは、こんな感じです。

 

この方式は、今現在(2021年10月時点)の方式になります。

 

今後、仕様変更などにより利用方法が変わることがあります。

 

また、提供会社の都合によりサービスが停止される可能性があります。

 

この場合、無料サービスのために
予告なく地図が表示できなくなってしまうことも考えられます。

 

ご利用の方はこれらのことを充分に理解した上で、
自己責任で使用するようにしてください。