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

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

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

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

simple map をインストールする

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

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

simple map と入力してリターン

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

OK　をクリック

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

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

記事に地図を追加する

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

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

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

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

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

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

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

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

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

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

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

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

これで表示してみると、

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

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

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

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

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

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

この地図は

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