会社や店舗等の所在地を表示するのにGoogleマップを埋め込んでいるWebサイトって多いですよね。実はこれらのマップは無料かつ簡単にサイト上に表示できます。
当記事では、下記のようなGoogleマップをWordPressサイトに埋め込む方法について解説します。
Googleマップを埋め込む手順
通常のGoogleマップをサイト上に表示するだけなら下記の手順で埋め込めます。
Googleマップで住所検索
下記よりGoogleマップを開き、画面左上の検索フォームから表示したいマップの住所を検索してください。今回は大阪駅の住所を例に解説します。
目的地の埋め込みコードを取得
目的地の住所を探せたら共有ボタンを押します。
次に「地図を埋め込む」を選択します。
HTMLコードが生成されるので、「HTMLをコピー」を押して埋め込みコードを取得します。この時、「中」と書かれたボタンを押すとマップのサイズを選択することができます。
埋め込みコードの貼り付け
先程取得したHTMLコードをWordPressの各エディタに貼り付けるとマップが表示されるようになります。
- クラシック
- ブロック
クラシックエディタの場合は、テキストエディタに取得したHTMLコードを入力してください。
ブロックエディタの場合は、カスタムHTMLブロックを追加してHTMLコードを入力してください。
PCやスマホで綺麗に表示するには？
ただ、貼り付けると幅が600pxで指定されて表示されます。HTMLコードの「width="600"」の部分です。ここを変更して、任意の幅を指定できますが、PCとスマホで比率が変わってしまうことがあります。TCDテーマをお使いの場合は、HTMLコードまるごとを以下のタグで囲むことで、どのデバイスでも綺麗にレスポンシブ表示できます。ぜひお試しください。
※上記タグは、YouTube動画をレスポンシブ表示させるために実装されているTCDのクイックタグ機能ですが、Googleマップにも応用いただけます。
まとめ
Googleマップは意外と簡単に埋め込めますよね。しかし、地図の配色の変更やマーカーのカスタマイズを行う場合は、Google Maps JavaScript APIの利用が必要になります。TCDテーマには、これらのAPIを使って下記のようなマップを表示できます。TCDユーザーの方はぜひご活用ください。（例：CURE）
なお、これらのAPIを使用するには、Google Maps Platformに登録してAPIキーを取得する必要があります。詳細な設定方法は下記に記載しておりますので、ぜひご覧ください。
Google Maps Platform APIキーの取得方法について解説します。TCDテーマのGoogleマップ表示機能を使用される方は、こちらのAPIキーが必要になりますので、当記事を参考に取得してください。 マップが表示されない時は？ Google Maps Platform APIに...
合わせて読みたいGoogleマップの関連記事
第1回 ：GoogleマップをWordPressサイトに埋め込む方法（当記事）
第2回 ：リッチなコンテンツを地図上に表示できるWordPressプラグイン「WP Google Maps」
第3回 ：「Googleマイマップ」で自分だけのオリジナルな地図を作る方法
コメント