WordPressでレスポンシブなGoogleマップを追加する方法
公開: 2018-02-28どこに行っても、Googleマップが道を教えてくれます。 都市をナビゲートしている間、即座に道順を取得できることが不可欠になっています。 そして、最も人気のある地図ソリューションとして、WordPressサイトにGoogleマップを追加するのはこれほど簡単なことではありません。 このユーザーフレンドリーなマッピングテクノロジーは、ビジネス情報、連絡先情報、および選択した場所への道順を提供し、ユーザーにとってナビゲーションを非常に便利にします。
WordPressサイトに地図を追加する準備はできましたか？ 手動およびプラグインを使用して1つを追加するには、いくつかの異なる方法があります。 DIYの方法から始めましょう。
注意：ライブサイトで変更を加えないでください。 無料のローカル開発アプリであるLocalは、ワークフローを簡素化し、サイトで安全に実験するのに役立ちます。 今日それを試してみてください！
Googleマップを手動で追加する
地図を埋め込む
マップの追加と埋め込みは、実際のマップをページに表示する方法であり、いくつかの簡単な手順を実行するだけです。 サイトに追加するマップが1つ（または数個）しかない場合は、手動でマップを追加するのがよい方法です。
1. Googleマップに移動し、場所を入力します。
2.検索ボタンをクリックします。
3.「共有」を選択します（右側のオプションになります）。
4.埋め込みコードをコピーし、コピーする前にすべて選択されていることを確認します。
WordPressで地図を追加する
マップを追加するには、投稿またはページを編集する必要があります。 地図を追加するのに最適な場所は、ユーザーが見つける必要があるかもしれない特定の場所について話している連絡先ページまたは投稿です。
5.[投稿]>[追加]または[ページ]>[追加]に移動します。
6. HTMLエディターを（テキストモードで）開き、マップを表示したい場所に埋め込みコードを貼り付けます。
7.好みに応じて、[ドラフトの保存]、[更新]、または[公開]を選択します。
ページを表示すると、マップが表示されます。 マップが表示されない場合は、埋め込みコード全体がコピーされてエディターに貼り付けられていることを再確認してください。
マップを応答性の高いものにする
これは、マップを操作する場合はオプションですが、視聴者に最高のユーザーエクスペリエンスを提供するための優れたアイデアです。 ユーザーは通常、道順を探しているときに外出中なので、このレスポンシブマップは、モバイルデバイスを使用しているときに役立ちます。
エディターに貼り付けたiframeに幅と高さの測定値があることに気付いたかもしれません。マップを応答させるには、調整を行う必要があります。 いくつかの単純なCSSでうまくいきます。 必要なのは、埋め込みコードの周りに追加のdivタグを付けることだけです。 クラスresponsive-mapを使用して、コードが次のようになるようにします。
<div class="responsive-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3510.126963167523!2d-81.5660680494897!3d28.385232982430246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88dd7ee634caa5f7%3A0xa71e391fd01cf1a0!2sWalt+Disney+World+Resort!5e0!3m2!1sen!2sus!4v1463933469006" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
CSSを追加します
これらのCSSプロパティをスタイルシートに追加することは、最後に行う必要があることです。 もちろん、ページのデザインによっては少し調整することもできます。
.responsive-map{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.responsive-map iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
以上です！ これらの簡単なコードの追加により、サイトにレスポンシブマップが作成されます。 DIYルートに行きたいかどうかわかりませんか？ それでは、簡単なプラグインソリューションについて見ていきましょう。
このCodePenですべてのコードをチェックしてください！
MapPressEasyGoogleプラグインを使用して地図を追加する
マップが数個しかない場合は、手動でマップを埋め込むのが良い方法ですが、たくさん追加する必要がある場合はどうなりますか？ たとえば、ビジネスサイトには、表示する必要のある場所が複数ある場合があります。 各マップを個別に追加すると、少し面倒になる可能性があります。 ここでプラグインが役に立ちます。 選択できる優れたオプションはたくさんありますが、MapPress Easy Google Mapsはチェックする価値のあるオプションです（そしてこのチュートリアルで使用するもの）。
開始するには、WordPressサイトにMapPressEasyGoogleマップをインストールしてアクティブ化する必要があります。
プラグイン設定
管理サイドバーのプラグイン設定メニューに気付くでしょう。また、MapPressには多くのオプションが付属しているため、あらゆるサイトに柔軟に対応できます。 マップタイプ、ズーム、境界線、配置、コントロールなどは、ここで簡単に調整できます。
マップの追加
繰り返しになりますが、地図を追加するには、投稿またはページを編集する必要があります。
1.[投稿]>[追加]または[ページ]>[追加]に移動します。
2.編集画面の[MapPress]セクションまで下にスクロールして、[新しいマップ]を選択します。
3.マップのアドレスを入力できるMapPressエディターが表示されます。 正確な住所がわからない場合でも、場所の名前を入力してみてください。そうすれば、場所が見つかるはずです。 現在地を共有したい場合は、「現在地」リンクを使用すると、プラグインが現在地を自動的に検出できます。
4.マップにタイトルを追加し、マップサイズを選択します。
注：マップの幅は、マップエディターまたはショートコードでパーセンテージとして指定できるため、モバイルフレンドリーになります。 通常、高さは固定されたままです。 ショートコードに高さと幅を追加する場合は、次のようになります。 [mappress map width="100%" height="400"]
5. [保存]、[投稿に挿入]の順にクリックします。 これで、マップが投稿に追加されます。
6.投稿を更新または公開して、地図を表示します。
これらのヒントとコツは、あなたのウェブサイトのためのグーグルマップ統合へのいくらかの方向性と洞察を与えるはずです。 マップを手動で追加する場合でも、プラグインを使用して追加する場合でも、ユーザーがマップをすぐに利用できるようにしておくと、ユーザーが正しい場所に到着するのに役立ちます。
ローカルでテストしてください！
注意：ライブサイトで変更を加えないでください。 無料のローカル開発アプリは、ワークフローを簡素化し、サイトで安全に実験するのに役立ちます。 今日それを試してみてください！
この記事は、もともと2016年2月2日に公開されました。最終更新日は、2018年2月14日です。