今回は、WordPressを使用しているホームページの中で誰でも簡単にグーグルマップを設置できる方法を、わかりやすく初心者の方向けに解説していきたいと思います。
▽グーグルマップを埋め込む方法は2通りある
WordPressを使ったホームページにグーグルマップを埋め込む方法は、大きく分けて2通りあります。
1つ目は、プラグイン(WordPressを便利にする機能を追加するもの)を使用する方法。2つ目は、WordPressの機能を使用して、グーグルマップを追加する方法です。
▽プラグインを使用してグーグルマップを設置する方法
まずは、1つ目プラグインを使用して、グーグルマップを設置する方法をご紹介します。
実は、グーグルマップを設置できるプラグインは複数存在しますが、今回は、「simple-map」というプラグインを使った方法をご紹介します。
まずは、WordPressの管理画面左側から、プラグインを選択し、
「simple-map」をインストール。その後、プラグインを有効化します。
有効化した後は、とても簡単で以下の通りに住所を入力し、テキストモードで所定の位置にコードを入力するだけで設置が完成します。
<例> [map addr=”東京都港区芝公園4-2-8” width=”600px” height=”450px”]
※ちなみにこれは東京タワーの住所を設置してみました。本社だけでなく、他の営業所がたくさんあったり、店舗紹介で地図をたくさん設置しないといけない場合は、この方法が効率的です。
▽プラグインを使用してのデメリット
プラグインを使うととても簡単で便利なのですが、デメリットが存在します。
それは、ウィルスの存在です。
プラグインは、世界中に配布されており、誰でも使用可能です。誰でも使用可能だからこそ、その脆弱性を狙ったウィルスが存在し、ホームページ自体が乗っ取られたり、改ざんされてしまったりしますので、どうしてもプラグインを使用したい場合は、更新をして常に最新版の状態を保っておくことが重要です。
また、プラグインの使用は自己責任となります。
お使いのサーバー環境などによって、ホームページに不具合が起こってしまう場合がありますので、必ずホームページのバックアップを取得したうえで、ご利用ください。
▽グーグルマップからのコードで直接地図を埋め込む方法
2つ目の方法は、グーグルマップから直接埋め込み用のコードを取得して、ホームページに設置する方法です。
まずは、グーグルマップから住所を入力し、挿入したい住所の地図を配置します。
すると左側にある「共有」をクリックするとポップアップが立ち上がりますので、「地図を埋め込む」というタブを選択。
その後、<iframe src から始まる長い英数字が混ざったものが表示されるので、それを全選択からコピーしてください。
<例>
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683745!2d139.7432442152582!3d35.65858048019947!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1507366336066″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
※ちなみに上記のコードは、東京タワーの住所で、横幅のサイズは、600 × 450ピクセルの場合です。
このコードが所定の住所のグーグルマップのコードとなります。このコードをテキストモードに変更後、全て貼り付けることで完成です!
▽グーグルマップのサイズを変更したい場合は?
コードの記載のある左側にあるタブをクリックするとグーグルマップのサイズの変更が可能です。
設置したい、ホームページの横幅が分かっている場合は、カスタムサイズを選択して、希望のサイズに変更してください。
もしわからない方もご安心ください!勘のいい方はお気づきかもしれませんが、上記のコードの中での「width=”600″ height=”450」の部分の数字を変更するだけで、地図の大きさを変更することができます。
貼り付けていいサイズがわからない方は、一度貼り付けてみて、そのあとに 「width=”600″ height=”450」の部分の数字を調整しながらおこなってみてください。
▽まとめ
今回は、WordPress初心者の方でも簡単にグーグルマップを設置できる方法をご紹介しました。
グーグルマップがホームページにあると、閲覧者にとっても便利で、かつグッとハイクオリティ感を演出できますので、ぜひお試しください。