やり方は、ご存じですか？
教えて～～
Contents
地図を挿入する方法
記事内に地図を挿入するのって、一見難しそうな気がするのですが、
画像を挿入するのと仕組みは同じ。
慣れてしまえば、何て事ないんですよ。
今回は、普通に挿入する方法と、プラグインを使う方法を
説明して行きたいと思います。
１、直接地図を挿入する方法
地図挿入に関しては、Google Mapを使います。
まず、Google Mapを起動します。
今回は『上野動物園』を表示したいと思います。
検索バーに「上野動物園」と入力して右の虫眼鏡をクリック。
（ここは上の動物園となってますが、気にしないでください(^^;）
下に候補が出てくるので、選べばOKです。
そうすると、地図が表示されます。
メニューが出てきます。
地図を埋め込むをクリックします。
- 地図を埋め込む
- サイズを選ぶ・・・大・中・小・カスタマイズが選べます
- HTMLをコピーする
確認してから大きさを選んでください。
簡単に表示されましたね～♪
２、プラグインを使う方法
直接、地図を埋め込む方法でも問題はないのですが、
お店を何店も紹介したり、地図を複数貼り付ける場合は、プラグインが便利です。
simple-mapというプラグインです。
ダッシュボード → プラグイン → 新規追加をクリック。
検索窓に『simple-map』と入力し、出てきた表示から、今すぐインストールをクリック。
インストールした後は、有効化しておきます。
設定 → simple-map をクリックします。
- 取得したAPIキーを入力
- 変更を保存をクリック
このプラグインは、ほかに設定は必要ありませんが、
2018年以降の新規のサイトにはGoogle MAP用のAPIキーが
必要となりました。
住所だけを表示させる方法
一番簡単な方法が、これです。
記事内で地図を挿入したい場所に、コードと住所を入力するだけ。
表示されました～♪
ここでは高さと幅を指定していないので、デフォルトの大きさになっています。
表示させる地図の大きさを指定してあげる
- width : 地図の幅をpxで入力
- height : 地図の高さをpxで入力
大きさを決めてあげると、指定の大きさの地図が表示されます。
これで表示させて見ますね⇓
ちゃんと表示されました。
マーカーをクリックした時に文字を表示させる方法
地図上のマーカーにカーソルをクリックした時に、文字を表示させたい時。
こんな風に書きます↓
これも実際の表示は、こちら⇓
まとめ
いかがでしたでしょうか。
記事に地図を埋め込むのって、意外と簡単ですよね。
おでかけ記事や、オススメのお店なども地図が挿入されていると、
分かりやすくていいですよね。
是非、ブログ運営をされる時に使ってみて下さいね。
最後まで読んで頂き、ありがとうございました。
