無料ホームページテンプレート Template Party無料ホームページテンプレート Template Party

Google Mapの設定方法【2019年】

手順

  1. Google Mapのページへアクセスします。
  2. 画面左上の入力フォームに住所(例:東京都千代田区永田町1丁目7-1)を入力し、横の「虫眼鏡」ボタンを押します。
    今回は「国会議事堂」の住所をサンプルとして使っています。
  3. 国会議事堂と周辺の地図が出てきます。
  4. 「共有」メニューをクリック。
  5. 出てきた小ウィンドウから、「地図を埋め込む」タブをクリック。

    「この地図は自分専用です」の表示について。
    今はGoogleアカウントにログインしていないとマップのhtmlが出力されないようです。ログインしていると必ず出る表示なので、気にせず進みましょう。

  6. 「HTMLをコピー」をクリック。
  7. そのままマップを表示させたいページのhtml側にペースト(WinならCtrl + V、MacならCommand + V)して下さい。
    実際に貼り付けたものが以下です。

    高さの調整をしたい場合、html側のheightの数字を直接変更して下さい。
    幅はstyle.cssによって画面幅100%に表示されるようになっています。

航空写真を使いたい場合

  1. あまり需要はないかもしれませんが、左下の地図アイコンをクリックすると写真モードになります。
  2. 以下が写真モードです。上の手順と同じ要領で貼り付ける事ができます。

レスポンシブへの対応

ほとんどのテンプレートには、style.css冒頭にこの設定が入っています。入っていない場合のみ設定して下さい。

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

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

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