サイトにGoogle マップを埋め込む

スポンサーリンク

知人からサイトにGoogle マップを埋め込みたいと相談がありました。

サイト自体は別の人に作ってもらったのですが、現在、管理は自分でしていて、文章の更新などをやっているようです。

コードを貼り付ける

サイトにGoogle マップを埋め込むのは簡単にできます。
例として大阪の通天閣をサイトに表示してみます。

  1. Google マップを開き、表示したい場所を検索
  2. 共有をクリックし
  3. 地図を埋め込むをクリックし、表示されているHTMLをコピー
  4. 自分のサイトの表示したいページに貼り付け

これでサイトにGoogle マップが表示されます。

簡単ですね。

埋め込んだ地図をカスタマイズ

単純に埋め込むのは簡単ですが、地図の倍率を変えて表示するやり方をご紹介します。

貼り付けるHTMLコードは長くて意味が分からない文字列になっていますが、この中に倍率を設定しているパラメータがあります。

埋め込むHTMLコードは以下のようになっています。

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3282.0872590077674!2d135.504117115484!3d34.6524991804468!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e76077e042ff%3A0xe5cbcf56def44557!2z6YCa5aSp6Zaj!5e0!3m2!1sja!2sjp!4v1515591755889″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
赤い太字で示した「4f13.1」が拡大のパラメータとなっているので、「4f」の後ろの数値を変更します。
明確なドキュメントはないようですが、1~180の間で設定が可能なようです。
数字が大きいほど縮尺が小さくなります。

縮尺が1の場合

縮尺が100の場合

これで見せたいエリアを表示することができますね。

ちょっとしたことですが、見やすさが変わってくるのでGoogleマップを埋め込む際にはお試しください。

スポンサーリンク

お役に立てばフォローお願いします