Movable Type.net

MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

Google マップ を使って会社の地図をブログに掲載する

今回は、サイト作成上のちょっとした Tips をご紹介します。

企業サイトやショップのサイトを作成する際、外せないコンテンツの一つとして「アクセス案内」があるかと思います。
このページで必要になる地図、これを、Google マップ を利用して素早く簡単にサイトへと設置する方法をご案内します。

d280210f309cd1ed5bef79ec62107fc5_s.jpg

  1. Google マップ を開く
  2. 左上のフィールドに会社やショップの住所を入力する
    googlemap01.png

  3. 虫めがねマークをクリックする
    googlemap02.png

  4. ポインタをクリックする
    googlemap03.png

  5. 右下右側の歯車マークをクリックする
    googlemap04.png


  6. 「地図を共有または埋め込む」をクリックする
    googlemap05.png


  7. タブ「地図を埋め込む」をクリックする
    googlemap06.png

  8. 表示されているソースコードをコピーする
    googlemap07.png

  9. MovableType.net の管理画面にログインし Google Map を設置したいサイト(ブログ)の [ウェブページ] - [新規] を開く
  10. [HTMLの編集] チェックボックスを有効にし、コピーしたソースコードを貼り付け、ソースコード内の「width="***"」の「***」の数値を「100%」に変更する
    ※ 「height="***"」の数値については、スマートフォンから閲覧した場合も考慮し任意の数値を入力してください。参考までに、350 程度ですとスマートフォンでも無理なく表示ができるようです。
  11. 必要情報を追記し [保存] ボタンをクリックする

作成したウェブページを確認し、地図が表示されていたら完成です。
手順 10 にて横幅の調整をしたため、挿入したフィールドの横幅いっぱいに地図が表示されるかと思います。

googlemap08.png
この方法を用いる事で、自分で地図画像を作成する、などの作業を減らすことができます。

ぜひ活用して、スピーディなサイト作成にお役立てください。

アカウント作成は無料! 同じアカウントでウェブサイトをいくつでも作成でき、作成したウェブサイト毎に14日間無料で利用可能です。

アカウント作成

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス