GoogleMapの地図を挿入!

GoogleMapの地図を挿入するには2パターンある。
ここでは、簡単な直接挿入について記載する。

GoogleMapからHTMLに乗せるリンクを取得

GoogleMapを開き、表示したい住所などを検索する。
設定ボタンや詳細などから、
『共有』か、『地図を埋め込む』を探す。
※PCだと、共有→地図を埋め込むでOK

ここで、『HTMLをコピー』などURLを取得できるので取得する。
このURLがGoogleMap表示のリンクとなる。
※厳密にはURLというより、埋め込むためのタグとリンクが取得できる

GoogleMapをページに埋め込む

埋め込みたいページを開き、編集する。
この時埋め込みたい場所を『HTMLモード』で編集する。
※WordPressなどでそのままリンクを張り付けるだけだとうまくいかないと思われる

HTMLモードで開いたら、GoogleMapからコピーしてきたURLを張り付ける。
これだけで表示できる!

GoogelMapを実際に埋め込んだらこんな感じ!

GoogleMapを埋め込む際の注意!

読み込んだコードをそのまま埋め込むと、
width、heightの値がベタ指定になっている。
このままだと、PCで表示したときは横幅が小さく、スマフォで表示したときは画面内に収まらないなどの問題が出てくる。

そのため、GoogleMapのコードを張り付けたら、width="100%"と変更すると画面幅に合わせた調整ができる。

おまけ

HTMLモードで開くので、タグを埋め込めば当然適用される!
そのため、右寄せ、左寄せ、中央寄せなども設定できる。
いい感じに調整するとよいかと思います。

Twitterでフォローしよう

おすすめの記事