テック・ガジェット・写真とか

Googleマップを埋め込みする方法。WordPressなどに挿入する方法。

インターネットの誕生で、個人的にはもっとも便利だというサービスを一つ上げるとしたら、間違いなくGoogleマップをあげるだろう。そんなGoogleマップだが、指定した場所を中心にブログやWebサイトなどに埋め込むことができる。そのやり方を紹介。

レスポンシブでの表示

今では殆どのサイトがレスポンシブに対応したサイトとなっていると思うが、iframeの指定がレスポンシブに対応しているなら、それらのサイトにGoogleマップを埋め込んだ場合、レスポンシブサイトであっても自動でリサイズされる。逆に指定していない場合は、予め対応しておく必要がある。

当サイトではこんな風に指定している。

Copy
iframe {
    width: 100%;
    height: 100%;
    margin-bottom: 40px !important;
}

埋め込みは基本的に無料

Googleマップの埋め込みは基本的に無料で利用できるが、APIを利用してJavaScriptなどのプログラムと連携して柔軟なGoogleマップを利用したい場合には有料となる。

詳しくは下記を参照。
https://cloud.google.com/maps-platform/

Google Map埋め込み手順

まずは、PCのブラウザでGoogleマップにアクセス。
https://www.google.co.jp/maps/

そしたら、表示させたいスポットや住所を検索して、検索結果画面の共有アイコンをクリック。

Googleマップで検索して共有

すると地図を共有するための画面が表示されるが、地図を埋め込むのタブを選択し、必要に応じて左上の「中」のプルダウンメニューから「カスタムサイズ」をサイズを指定。サイズを指定したらHTMLをコピーをクリック。

Google Mapの地図を埋め込むを選択してHTMLをコピー

上記の共有画面で「HTMLをコピー」をクリックすると地図情報が含まれるiframeタグがコピーできるので、後はそれをブログやサイトなどに貼り付けてブラウザでプレビューすればOK。下記が貼り付けたサンプル。

WordPressに挿入する方法

WordPressにGoogleマップを埋め込みする方法だが、まずはブロックをの挿入ボタンをクリック。

WordpressにGoogleマップ埋め込みする方法

そしたら、一覧にカスタムHTMLのブロックがある場合にはそれをクリックし、ない場合にはhtmlとクリックして検索して挿入する。

Googleマップをワードプレスに挿入

あとは、Google Map埋め込み手順でコピーしたHTMLのコードを貼り付ければOK。

カスタムサイズでサイズが反映されない場合

カスタムサイズでサイズを指定したのにも関わらずサイズが反映されない場合、スタイルシートが原因だと考えられる。その場合には、iframeタグのインラインで高さを直接指定したり、divタグでiframeタグを囲って指定するなどの対応が必要だろう。

英語地図を埋め込む

何かしらの案内で英語地図を埋め込む必要があるかと思うが、使用しているPCの言語環境によって自動で地図は英語表記になるが、強制的に英語にしたい場合の手軽にやる方法。

埋め込み用のHTMLをコピーするとタグの最後に1sja!2sjpというような文字列があると思うが、このjaっていう箇所をenに変更するだけで簡単に英語地図を表記することができる。

先程の新宿駅周辺の地図だが、変更すると下記のように日本語表記と英語表記になる。

下記はカリフォルニア周辺だが、日本語表記になっている。

書き換えるだけで簡単に英語表記に。

ピンを追加したGoogleマップを埋め込む方法

ピンを追加したGoogleマップを埋め込むには、マイマップを使う必要がある。やり方は下記リンクを参照。

Googleマップの埋め込みに関連する記事