ホームページやブログで、お店や公園などを紹介する際に、地図があると読者にとって分かりやすいですよね。
言葉だけで説明されるより、地図を見れば一発で分かります。
地図をキャプチャーして貼り付けるのではなく、ウェブサイト内にgoogleの地図そのものを埋め込みますので、地図を移動させたり拡大させたりできるとても便利な機能です。
今回は、直接HTMLコードを入力（コピペ）して埋め込む方法、プラグインを使って埋め込む方法の２つの方法についてご紹介します。
HTMLコード入力で埋め込む方法
なんか難しそうな感じがしますが、コピペ（埋め込みコードをコピーして貼り付けるだけ）で簡単にできますので、是非覚えておきたいところです。
Google マップを開く
Googleマップにアクセスし、左上の検索窓で目的地を入力して検索します。
ピン（マーカー）表示の確認
目的地がピン表示されたか確認してください。
下の図ではスカイツリーのところにピン表示（赤い枠で囲った箇所）されていますね。
HTMLコードの取得
上の図で「メニュー」をクリックすると、メニュー一覧が表示されますので、その中から「地図を共有または埋め込む」をクリックします。
下の図のように、「地図を埋め込む」タブをクリックし、地図の大きさを選択します。
大中小を選択すると、地図の大きさが変化しますので、その大きさに合わせたHTMLコードをコピー（Ctrl+C）します。
カスタムサイズの場合は、自分のサイトに合わせてサイズを入力してください。
HTMLコードの貼り付け
WordPressの場合は、テキストエディタにして、コピーしたHTMLコードを貼り付ければOKです。
プレビューで確認してみましょう。
うまく表示されていますね。
ついでにスマホでも確認してみましょう。
地図は自動的にスマホサイズに最適化されます。
地図を移動したり拡大したりする場合は、指2本を使って動かします。指1本では操作できませんのでご注意を。
関連記事
プラグインを使って埋め込む方法
「MapPress Easy Google Maps」というプラグインをご紹介します。
MapPressのインストール
WordPressの管理画面の[プラグイン]－[新規追加]をクリックし、「MapPress」で検索します。
「今すぐインストール」をクリックし、有効化をしてください。
MapPressの設定
WordPressの管理画面の[MapPress]をクリックします。
下の図のように、[Google API Key]を入力してください。
Google API Keyの取得方法はこちらをご覧ください。
マップサイズはレスポンシブルに対応できるよう、横幅を%表記に変更しておくとよいと思います。今回は「425」から「100%」に変更してみました。
最後に[変更を保存]をクリックしてください。
地図の検索・保存・挿入
投稿ページの下にMapPressがあります。
[新規マップ]をクリックしてください。
マップタイトルに任意の名称を入力します。（①）
②の欄に目的地の住所あるいは名称を入力して、検索ボタン（③）を押してください。
地図が表示されたら、[保存]をクリックしてください。（④）
下の図のように、スカイツリーのカテゴリーが追加されました。
ここで、[記事へ挿入]をクリックすると、テキストエディタにコードが追加されます。
これで地図の挿入は完了です。
プレビューで確認してみましょう。
うまく表示されていますね。
必ずスマホでも確認してみましょう。
地図は先ほど横幅を%（100%）で設定しましたので、スマホサイズに最適化されます。
ちゃんとスマホサイズで表示されていますね。
まとめ
それほど地図を挿入する場面がなければ、直接HTMLコードをコピペして地図を表示させた方が、余計なプラグインをインストールしなくて済むのでよいと思います。
結構地図を多めに載せる場合には、プラグインを使った方が便利だと思います。
自分の環境に合わせて使いやすい方を試してみてください。
