WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

GoogleMapをレスポンシブでサイトに埋め込む方法。

地図をレスポンシブで埋め込む
サイト作成ではかなりよく使われるGoogleMapをサイト幅に合わせてか可変(レスポンシブ)で埋め込む方法です。
たまにGoogleMapのバージョンアップがあるの設置までのステップが変わってきますが今回は2016年7月現在の最新の設置方法です。

1.GoogleMapで場所を決める

GoogleMapにアクセス→設置したい場所をクリックしてピンを立てる→下の詳細をクリッ→左側のハンバーガーメニューをクリック

Googlemapで位置を決定

2.埋め込みコードを取得

地図を共有または埋め込む→地図を埋め込むの順にクリックして中のコードをコピーします。

埋込コードを取得

3.貼付ける

下記のようにコピーしたiframeをdivで囲んでHTMLに貼付けてCSSでレイアウトするだけです。

past

HTML

CSS

4.まとめ

上記のように簡単に設置は出来ますが、たまにGoogleMapはアップデートがあるのでコードの取得までのステップが変わる場合があります。