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

jquery.nivo.slider.jsを使ってリッチなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。今回も数枚の画像を使ったスライドショーを作りたいと思います。 見た目がキレイで、ユーザーが自由に前後の画像へ移動する事も出来て、ちょっとしたテキストも入れられるという・ …

no image

WordPressのバージョンを消す方法。

この記事は約 2 分で読めます。 WordPressのバージョンによってはセキュリティー的に脆弱性があるようで、いろいろネット検索をしていると表示を消した方が良いと出て来たので消してみたいと思います。 …

no image

WordPressがいきなり真っ白になった時。

この記事は約 1 分で読めます。 WordPressでこのサイトを作って、約2年になります。 地道に継続していて、当たり前に使っていたのに・・・。 ある日、ブラウザに表示させてみると・・・真っ白になっ …

no image

Webサイト移転の時に自動的にジャンプする方法

この記事は約 1 分で読めます。 たまたまいじっていたサイトでサーバーを移転する事になりました。 そんなワケで、ちょこっとメモ。 今回、独自ドメインをとっていなかった為、URLが変わります。 その場合 …

no image

WordPress the_excerpt()を使った抜粋にチャレンジ

今回は、「抜粋」をテンプレートタグthe_excerpt()を使って実現する方法にチャレンジしてみました。