WordPressでGoogle Mapを埋め込み地図表示させる方法

WordPressでGoogle Mapを埋め込み地図表示させる方法

様々なサイトでGoogl Mapの地図表示を見かけたことはあるかと思います。

ホームページでの会社案内や店舗案内、観光サイトやお店の案内サイトなんかにもよく使われていますね。

Google Mapをサイトに表示させておけば、スマホなどで地図を見ながらそのまま行きたい所まで行くことができるので訪問者にとっては便利で親切ですね。

この記事では、WordPressでサイト内にGoogle Mapを埋め込み地図表示させる方法をお伝えしていきます。

この方法はWordPressだけでなく、無料ブログ(アメブロ、FC2、So-net、Seesaa、Livedoorブログ・・)などでも同じ要領で挿入することができます。

Google Mapsからコードを取得する

まずは、Google Mapsを開いて検索窓から埋め込みたい地名や場所、住所を入力して表示させます。

ここでは、例としてディズニーランドを表示させてみます。

Google Map検索 - ディズニーランド

地図が表示されたら、Google Mapの右下にある歯車マークをクリックしましょう。

Google Map歯車マーク

立ち上がったメニューの地図を共有または埋め込むをクリックします。

Google Map歯車メニュー

ポップアップ画面が立ち上がるので、上部のタブから地図を埋め込むを選択します。

Google Mapポップアップウィンドウ

Google Mapのプレビュー画面が表示されました。

表示されるサイズがプレビューの大きさでよければ、上部に表示されているコードがGoogle Mapの位置表示をしたコードとなります。このコードをコピーしておきましょう。

Google Mapコード取得

Googl Mapの表示サイズを好みのサイズに変更する方法

コードの左側にある「」と表示されている部分から表示するGoogle Mapのサイズを変更することができます。

Google Map画像サイズ変更

クリックしてみると、「小」「中」「大」以外に「カスタムサイズ」というものがあります。

カスタムサイズを選択することで好みのサイズに設定をすることができます。

Google Mapカスタムサイズ

サイズ表記はpx(ピクセル)で「 横 × 縦 」となります。あなたのサイトに合わせて変更してみましょう。

実サイズでプレビュー画面を見て確認することができます。

その下に表示されているのが、サイズを調整したGoogle Mapのコードとなります。コピーしておきましょう。

Google Mapカスタムサイズ編集

取得したコードの埋め込み方法

WordPressの管理画面の 投稿新規追加 もしくは固定ページで掲載する場合は 固定ページ新規追加 をクリックします。

新規の記事の作成画面となりますので、投稿したい内容を書き込んでいきます。

Google Mapを表示させたい部分までいったら、テキストモードに変更します。

テキストモードで記事を作成している場合はそのままで!

Google Mapコード、テキストモード変更

テキストモードに変更したら、Google Mapを表示したい場所に先ほどコピーしたコードを貼り付けます。

Google Mapコード貼り付け

貼り付けたら、一度プレビューで確認してみましょう。

Google Map表示プレビュー

うまく表示できましたね(^^)

この方法はWordPressだけに限らず、無料ブログでも同じ様に記事の投稿画面から貼り付ければ表示することができます。難しい方法でもないと思いますので有効活用してみてくださいね。

[記事公開日]2015/06/04

最新情報、定期購読にはFacebookページが便利です。

ブログ吹き出し使用素材1

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


ピックアップ記事

思わずポチッ。無料(フリー)のWebボタン素材サイト11選

思わずポチッ。無料(フリー)のWebボタン素材サイト11選

Web制作を行っている人にはかかせないボタン素材ですが、無料(フリー)で得られるボタン素材サイトは数多く存在します。 数多く配布されているだ…

おすすめ記事

Now!!

当サイトのテーマ(テンプレート)

WordPressテーマ「AN (tcd014)」
ページ上部へ戻る