pickup
Word Plessの記事に地図を埋め込む方法2つ

ミント
ブログの記事の中に、地図を挿入したい時ってありますよね~?
やり方は、ご存じですか?

ぺんちゃん
やった事ないし、分からない!
教えて~~

ミント
OK、じゃあ説明していくね~
そんなの簡単、知ってる~って方は、復習がてらお付き合い頂けると嬉しいです。

地図を挿入する方法

記事内に地図を挿入するのって、一見難しそうな気がするのですが、
画像を挿入するのと仕組みは同じ。

慣れてしまえば、何て事ないんですよ。

今回は、普通に挿入する方法と、プラグインを使う方法
説明して行きたいと思います。

1、直接地図を挿入する方法

地図挿入に関しては、Google Mapを使います。

まず、Google Mapを起動します。

今回は『上野動物園』を表示したいと思います。

検索バーに「上野動物園」と入力して右の虫眼鏡をクリック。
(ここは上の動物園となってますが、気にしないでください(^^;)

下に候補が出てくるので、選べばOKです。

そうすると、地図が表示されます。

この状態で、左上に横線が3つ並んだマークをクリックすると、
メニューが出てきます。
地図を共有または埋め込む をクリックします。
『リンクを共有』『地図を埋め込む』を選べるので、
地図を埋め込むをクリックします。
  1. 地図を埋め込む
  2. サイズを選ぶ・・・大・中・小・カスタマイズが選べます
  3. HTMLをコピーする
②のサイズでカスタマイズを選択すると、プレビュー表示出来るので、
確認してから大きさを選んでください。
HTMLをコピーしたら、記事内に埋め込んでいきます。
投稿画面で、テキストモードに変えてから、好きな場所にコードを貼り付けます。
実際に表示させてみると、こんな感じです⇓

簡単に表示されましたね~♪

2、プラグインを使う方法

直接、地図を埋め込む方法でも問題はないのですが、
お店を何店も紹介したり、地図を複数貼り付ける場合は、プラグインが便利です。

simple-mapというプラグインです。

ダッシュボード → プラグイン → 新規追加をクリック。

 

検索窓に『simple-map』と入力し、出てきた表示から、今すぐインストールをクリック。

インストールした後は、有効化しておきます。

設定 → simple-map をクリックします。 

  1. 取得したAPIキーを入力
  2. 変更を保存をクリック

 

このプラグインは、ほかに設定は必要ありませんが、
2018年以降の新規のサイトにはGoogle MAP用のAPIキー
必要となりました。

 

 

住所だけを表示させる方法

一番簡単な方法が、これです。
記事内で地図を挿入したい場所に、コードと住所を入力するだけ。

 

実際に、表示させてみますね。
表示させたい住所に上野公園の住所を入力してみます。
〒110-8711 東京都台東区上野公園9−83
東京都台東区上野公園9−83

表示されました~♪

ここでは高さと幅を指定していないので、デフォルトの大きさになっています。

表示させる地図の大きさを指定してあげる

 

  • width : 地図の幅をpxで入力
  • height : 地図の高さをpxで入力

 

大きさを決めてあげると、指定の大きさの地図が表示されます。

 

これで表示させて見ますね⇓

東京都台東区上野公園9−83

 

 

ちゃんと表示されました。

マーカーをクリックした時に文字を表示させる方法

地図上のマーカーにカーソルをクリックした時に、文字を表示させたい時。
こんな風に書きます↓

これも実際の表示は、こちら⇓

 

パンダが待ってるよ!

 

 

まとめ

いかがでしたでしょうか。

記事に地図を埋め込むのって、意外と簡単ですよね。

おでかけ記事や、オススメのお店なども地図が挿入されていると、
分かりやすくていいですよね。

是非、ブログ運営をされる時に使ってみて下さいね。

最後まで読んで頂き、ありがとうございました。

今なら無料で使える素材集はこちら

ブログに使う素材に困ったら、チェックしてみてくださいね(☆)

 

 

ミントへのお問合せや、ご質問はこちらまで

どんな些細な事でも構いません。

ちょっとした世間話や、主婦目線のグチでも大歓迎。

ミントにメールしてもらえたら、嬉しいです。

ヤギさんの画像を、クリックしてね♪

Twitterでフォローしよう