ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

Google Mapの設定方法【2015年】

当ページで解説している画面構成と異なる場合はこちらをご覧下さい。

手順紹介

  • Google Mapのページへアクセスします。
    ページ上部の入力フォームに住所(例:東京都千代田区永田町1丁目7-1)を入力し、横の「虫眼鏡」ボタンを押す。今回は「国会議事堂」をサンプルとして使ってみます。
  • 以下のように国会議事堂と周辺の地図が出てきました。
  • 住所の左にある3本バーのアイコンをクリックします。
  • 出てきたウィンドウから「地図を共有または埋め込む」を選択します。
  • 出てきたウィンドウから「地図を埋め込む」を選択します。
  • 中サイズがプルダウンメニューで選択されている状態なので、▼ボタンをクリックしてリストから「カスタムサイズ」を選択します。
  • 希望の仕上がりサイズを入力し、下のurlをコピーしてご利用中のテンプレートのhtml側に貼り付けて下さい。
  • 実際に貼り付けてみました↓↓↓

レスポンシブへの対応

レスポンシブタイプのテンプレートにマップを貼り付ける場合、そのままだとウィンドウから飛び出てしまう場合があります。その場合は以下の設定を行って下さい。

  • cssフォルダのstyle.cssのPC用設定箇所(前半部分のどこでも可)に以下を追加。
    iframe {
    width: 100%;
    }

    この設定をすると、htmlの幅をいくつに設定してもifameが外のブロックに対して100%で表示されるようになります。

↑ PAGE TOP