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 ローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法

この記事は約 2 分で読めます。 WordPressでサイト制作をする時。 XAMPPやMANPなどローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法をメモします。 ※Wordpressは既 …

no image

WordPress.comの便利機能が入ってる 「Jetpack」を試してみた♪

この記事は約 1 分で読めます。 アクセス解析プラグイン「WordPress.com Stats」をずっと使っていました。 他にもアクセス解析の勉強のために使用しているものがあるのですが、一番よく見て …

no image

ナビゲーションボタンのコーディングについて考えてみた

この記事は約 1 分で読めます。 ナビゲーションボタンのコーディングをする時に、どんな風にコーディングしていますか? 対応するブラウザとかによっても変わると思うのですが・・・。 今回、ちょっとナビゲー …

no image

Androidでp要素などが、勝手に改行されて幅が狭くなった時にしてみたこと。

この記事は約 1 分で読めます。 PCと同じようにスマホでも閲覧することが当たり前になって、最近ではアクセス解析をするとPCからの閲覧をすっかり抜いてしまったサイトもあります。 スマホからの見え方をチ …

no image

Google Analytics始めてみた。

この記事は約 2 分で読めます。前々からアクセス解析は少し興味あって・・・。 「FC2」とか、「NINJA TOOLS」のアクセス解析を利用していたのですが、前々から気になっていた「Google An …