当サイトには広告が含まれております

住所からGoogleMapを簡単に表示できるプラグイン simple map

この記事は最終更新日から6年経過しています。内容が古い可能性があります。

Image [8]

8Beatアドベントカレンダーを毎日更新しています。8Beat内の設備やサービスの紹介と、近所にあるお店の紹介が主な内容です。

近所にあるお店ですが、なかなかどこにあるかわかりにくいので簡単にgooglemapを表示したいと思いました。プラグインで簡単に追加できたのでそれについて書きます。

改訂版の記事を書きました!

あわせて読みたい
【2018年版】住所からGoogleMapを簡単に表示できるプラグイン Simple Map 住所からGoogleMapを簡単に表示できるプラグイン simple mapという記事をだいぶ前に書いたのは覚えていたのですが、確認すると2014年でした。思えばずいぶん遠くに来ま...

記事をざっと見る

simple map をインストールする

色々検索して simple map というものがよさそうなのでこれを使ってみます。

Image

ダッシュボード プラグイン>新規追加

Image [1]

simple map と入力してリターン

Image [2]

いますぐインストール をクリック

Image [3]

OK をクリック

Image [4]

プラグインを有効化 をクリック

Image [5]

インストールが終了しました。

記事に地図を追加する

記事に地図を追加するのはとても簡単でした。

おすすめランチ シャーロックホームズ

Image [6]

たとえばこの記事の最後に地図を入れたいと思います。今はこのようになっています。

Image [7]

記事の編集画面を開いて、一番最後に

地図はこちら!
[map addr="東京都八王子市三崎町4-1"]

と入力して保存します。そうすると、

Image [8]

このように地図が表示されました!簡単です(^^)/

地図の大きさや縮尺を変えてみる

この地図ちょっと縦が短いなぁと思いましたので大きさを変えてみたいと思います。

[map addr="東京都八王子市三崎町4-1" width="600px" height="400px"]

横幅と縦の長さはこのような指定で変更可能でした。

横幅: width=”横幅のピクセル数px”
縦の長さ: height=”縦の長さのピクセル数px”

これで表示してみると、

Image [9]

指定した大きさになりました。

こんどは地図の縮尺(zoom)を変えてみたいと思います。もうちょっと地図が大きい方が場所が分かりやすい気がしたので、

[map addr="東京都八王子市三崎町4-1" width="600px" height="400px" zoom="18"]

このように指定してみました。すると、

Image [10]

こんな感じに大きくなりました。8Beatのスグ近く、ということが分かりますね(^^)/

zoomの数値は16とか17だと元と同じ大きさでしたので2ずつ変更するのかな~とか思いますが、希望の大きさが合ったらその辺の数字を増減して試してみるといいと思います。

この地図は

IMG_9748

このようにiPhoneで見てもちゃんと表示されるのでとてもいいと思います♪

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る