Webの記録

コピペで簡単にできるレスポンシブ対応GoogleMapの設置方法

投稿日:

この記事は約 4 分で読めます。

map_mini
ショップなどのサイトだと、地図は必須ツール。GoogleMapを利用する機会が多いです。
今回、スマホ対応サイトでGoogleMapを設置する機会がありました。
細かなカスタマイズをする場合は、GoogleMapsAPIを利用した方が良いかと思うのですが、シンプルで良ければ簡単にコピペでもGoogleMapを設置できます。
スマホ対応でもバッチリできたので、メモとしてここに残します。


GoogleMapの設置方法


1.GoogleMapで表示したい地図のiframeをコピー

GoogleMapで表示したい場所の地図を開きます。
その画面で、右下に歯車のマークがあるので、ここをクリックします。
googlemaps


「地図を共有/埋め込む」をクリックします。
googlemaps


「地図を埋め込む」タブで出てきたiframeのコードをそのまま全部コピーし、htmlファイルに貼りつけます。
googlemaps

2.htmlとcssで調整

先ほどコピーしたiframeを以下のように、divで囲う(div名は何でもOK)

//ggmapというクラスのdivで囲ってみました
<div class="ggmap">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3323.5896547052184!2d130.42062199999998!3d33.590002!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x354191c7e42f040d%3A0x168a4ca32b854693!2z5Y2a5aSa6aeF77yI56aP5bKh77yJ!5e0!3m2!1sja!2sjp!4v1415965445376" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div><!-- /.ggmap -->



cssは以下のように記述すると画面いっぱいに表示されます。

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmapr object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

googlemaps


しかし、スマホで横幅いっぱいだとスクロールした時に、GoogleMapに触ってしまうと画面のスクロールがし難いので、以下のようにすこしmarginで調整しました。
値はデザインや実機での見せ方によって変えます。

position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
//marginで調整
margin: 0 6.25% 0 6.25%;
}
 
.ggmap iframe,
.ggmapr object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

googlemaps


以上の記述で、さくっとGoogleMapがスマホでも良い感じに設置できました。

参考にさせて頂いたサイト

今回参考にさせて頂きました、ありがとうございました!


GoogleMap関連の過去記事

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

WordPressでオリジナルテーマ作りにチャレンジ4【index.php編】

この記事は約 2 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 今回は、「index.php」の部分を作りたいと思います。 前回までに1つのhtmlを「header. …

no image

レスポンシブ対応ナビゲーションを簡単に付けられる「SlickNav」

この記事は約 1 分で読めます。 レスポンシブサイトで、PCとスマホではメニューの見せ方を変えたいもの。 画面の幅が狭くなった時はハンバーガーボタンと言われる三本線のボタンを表示をすることができる、j …

no image

simplegallery.jsでシンプルだけど高機能なスライドショーを作ってみた♪

この記事は約 1 分で読めます。今回は、数枚の画像でスライドショーを「simplegallery.js」で作ってみたいと思います。 名前の通りシンプルですが、なかなか高機能で取付けも簡単に出来たので、 …

no image

「baserCMS」をエックスサーバーにインストールしてみた

この記事は約 1 分で読めます。 今回、「baserCMS」に関わる機会がありそうなので、試しにエックスサーバー にインストールしてみました。 日頃WordPressばかりだったので、簡単インストール …

no image

thickbox.jsを使ってLightBox風モーダルウィンドウにチャレンジ♪

この記事は約 1 分で読めます。今回も、数枚の画像を効果的に見せる方法にチャレンジしたいと思います。 ・・・で、画像をクリックすると大きな画像を表示させることが出来るLightBox風にしたいなぁって …