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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPress カテゴリごとに部分的デザインを変えたい時

この記事は約 1 分で読めます。 WordPressで自分なりにテーマをカスタマイズしていると、カテゴリごとにデザインを変えたい!ということがあります。 ページまるごとデザイン(表示)を変える場合と、 …

no image

LIghtBox風画像ギャラリーを「ColorBox」で作ってみた♪

この記事は約 1 分で読めます。LightBoxのように、画像を拡大表示出来るjQueryプラグインを探してみました。 たくさんLightBox風のライブラリはありましたが、今回は「ColorBox」 …

no image

苦手なJavaScriptをイチから勉強してみる【if文とfor文】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【JavaScriptを外部ファイルにする】の続きとしてメモします。 イチから「JavaScript」を学び直しをする …

no image

スマホ用にWebクリップアイコンを設置してみた

この記事は約 1 分で読めます。 Webクリップアイコンの設置はとても簡単!アイコン素材をちゃんとアップして、1行link要素を書くだけです。 iPhone、iPad、Androidでホーム画面にショ …

no image

右クリック禁止で画像のコピーガード(ドラッグ禁止対策追加)

この記事は約 2 分で読めます。 【2015.2.20追記】設置方法にドラッグ禁止についても、対策追加しました! 今、あるところのサイト制作をしているのですが・・・。 「画像の著作権を守るため、画像の …