極意(54) HTMLタグによるGoogleマップの貼り付け

GoogleマップをHAIKページに貼り付けるには、以下の2方法があります。

  1. プラグイン #Gmap で Googleマップを表示するケース
  2. HTMLタグで Googleマップを表示するケース


【注意】APIキーが必要なケースがある

2016年6月22日から新規サイトで Googleマップを使用する場合は「APIキーが必須」になりました。それは、前記1の「プラグイン #Gmap で Googleマップを表示」の場合に相当します。勿論、2016年6月22日以前に作成した Googleマップには無関係な話です。

これから新規に Googleマップを作成する場合は、前記2の「HTMLタグで Googleマップを表示」をお薦めします。前記2の場合、APIキーを取得する必要がないからです。但し「HTMLタグで Googleマップを表示」のケースで作成した Googleマップは、レスポンシブ・レイアウトになっていません。

[check]レスポンシブか否かの確認方法
以降の2つの Googleマップの内、2番目のマップがレスポンシブ・レイアウトになっています。その確認方法として、画面の横幅を300~400px位に狭めて、ご覧戴ければ確認できると思います。


先ずは、HTMLタグで Googleマップを表示してみました。

上記のソースコードです。

#html{{
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3235.299097132448!2d139.9709414150156!3d35.817136680162825!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018831c7b91a0f7%3A0x58c452441f874355!2z44Oq44OV44Os44OD44K344Ol44OX44Op44K25p-P!5e0!3m2!1sja!2sjp!4v1508546845563" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
}}

[check]上記の Googleマップは、レスポンシブ・レイアウトにはなっていません。


上記のマップをレスポンシブにするには?

前記のGoogleマップをレスポンシブ・レイアウトに変換した例です。


前記のソースコードです。

#html2(<div class="g-map">)
#html{{
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3235.299097132448!2d139.9709414150156!3d35.817136680162825!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018831c7b91a0f7%3A0x58c452441f874355!2z44Oq44OV44Os44OD44K344Ol44OX44Op44K25p-P!5e0!3m2!1sja!2sjp!4v1508546845563" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
}}
#html2(</div>)


解説します。

  1. 元々のGoogleマップのHTMLタグを、以下のソースコードで挟む。
    #html2(<div class="g-map">)
    <ーーーここにGoogleマップのHTMLタグーーー>
    #html2(</div>)
  2. GoogleマップのHTMLタグとは、前記の #html{{ から }} までを意味します。
  3. ページのトップにレスポンシブ・レイアウトにするCSSを設定する(後述)。


前提条件としてCSSの設定が必須です。

ページのトップに以下のCSSスクリプト文を追加して下さい。

//=================CSSの設定============//
#beforescript{{
<style type="text/css">
<!--
/*---------- css/g-map -------------*/
.g-map {
position: relative;
padding-top: 75%;
height: 0;
overflow: hidden;
}
.g-map iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
-->
</style>
}}
//=============CSSの設定/END============//