Adobeスクールパートナー(ブロンズ)

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Dreamweaver

WebサイトにGoogleマップを埋め込む方法

 

HTMLでwebサイトにGoogleマップを埋め込む方法を今回はご紹介します。

まずは表示させたい場所をGoogleマップで検索します。

左側の建物名のすぐ下に表示されている共有ボタンをクリックします。

地図を埋め込むを クリックします。

“HTMLをコピー”にてHTMLへの埋め込み専用のコードをコピーします。

※この時、上部に表示されている大、中、小にて
webサイトに表示させるGoogleマップの大きさを簡単に選択することができます。

htmlを保存してwebサイト上で確認してみましょう。

Googleマップ埋め込み成功です。

この調子でどんどん充実したサイトにして行きましょう!

グーグルマップ icon by Icons8

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Just Code

    Web

    Just Code cssで画像加工

    CSSを使用して、画像を加工するツールを紹介します。オンラインで利…

  2. Web

    【CSS】calc()関数で簡単サイズ指定

    今回はcalc()関数についてご紹介します。calc()関数とはC…

  3. Flexbox(縦並び)

    Web

    Flexboxで縦並びを簡単に!

    以前、ご紹介しました「Flexboxで横並びを簡単に!」…

  4. Web

    WEBで使える画像は4つ!ファイルサイズも比べてみた

    WEB用の写真やイラレやフォトショで作った画像を書き出すとき、「とりあ…

  5. CSS Grid Layoutで複雑なレイアウトを3ステップで作成

    Web

    【CSS】Grid Layoutで複雑なレイアウトを作成

    最近、Pinterestのようなギャラリーページなどで大きさが異なる画…

  6. イラスト

    Web

    JQueryのランダム要素簡単実装

    ○はじめに難しそうですが案外簡単に使えますので、初心者の方向けにざ…

人気の記事

おすすめの参考書

PAGE TOP