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

フォントサイズの単位変換が楽に出来る「PXtoEM.com」

この記事は約 1 分で読めます。 Webサイト制作で、コーディングをしていく時に、フォントサイズを計算しなくちゃいけない事があります。 単位が違う(px、em、ptなど)場合、なかなか計算が面倒くさい …

no image

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …

no image

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

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

no image

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

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

no image

WordPress 簡単にスライダーを投稿内に追加出来るプラグイン「SlideDeck」

この記事は約 1 分で読めます。 WordPressには、とても素敵なスライダープラグインがあります。まだ試せていないものもたくさんあるので、少しずつ試していく予定です。 今回は、投稿する記事の中にス …