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

テンプレートパーティー

Google Mapの設定方法【2015年】

Google Mapの編集画面が数年ごとに変わっていくので、今掲載している設定方法が使えなくなった場合は臨時的にこちらの方法をお試し下さい。

手順紹介

  • Google Mapのページへアクセスします。
    ページ上部の入力フォームに住所(例:東京都千代田区永田町1丁目7-1)を入力し、横の「虫眼鏡」ボタンを押す。今回は「国会議事堂」をサンプルとして使ってみます。
  • 以下のように国会議事堂と周辺の地図が出てきました。
  • 上部のurl欄をクリックしてアドレスをコピーしてメモ帳にでも一旦貼り付けておいて下さい。コピーはWindowsならキーボードの「Ctrl」と「C」を同時に押せばOK
  • コピーしたアドレスは以下ですが、ここの黄色い部分だけをコピーしなおします。「+」の印の次から「/」の手前までです。
  • 以下のアドレスの「●●●」と、上の黄色い文字列を置き換えます。widthは幅、heightは高さなので、お好みに合わせて変更してもらって構いません。
  • 実際に貼り付けてみました↓↓↓

レスポンシブへの対応

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

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

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

補足。

urlの最後の「t=m」ですが、「m」を「k」にすると航空写真になります。その他色々カスタマイズできるようなので、興味がある人は専門サイトなどを検索してみて下さい。

↑ PAGE TOP