ウェブ学のすすめ

Study of Web Design & Programing

はてなダイアリーでGoogleマップを表示させる方法

4月25日から開講する「WEBマスター養成科」の受講場所、
株式会社ファウンデーション フェリカテクニカルアカデミー」の住所をGoogleマップでブログ内に表示させたいと思います。

東京都豊島区南池袋3−18−40 SHIMAビル3F

ステップ1

まずGoogle マップで「東京都豊島区南池袋3-18−40」と検索します。

なぜか「SHIMAビル」ではなく隣の建物を示しています。
「SHIMAビル」上で右クリックして出てきたメニューから「この場所について」をクリックします。

検索窓に「緯度,経度」の順番で経緯度が表示されます。

今回の場合、

  • 経度:139.715466
  • 緯度:35.724398

になります。

ステップ2

はてなの「map記法」を使ってGoogleマップを表示させます。

▼「map:x[経度]y[緯度]:map」と記述した場合

(例)map:x139.715466y35.724398:map

拡大・縮小は「」ボタン、「-」ボタンを、
地図の切り替えはMAP・SATELLITE・HYBRIDボタンを押します。

▼「map:x[経度]y[緯度]:satellite:h300」と記述した場合

(例)map:x139.715466y35.724398:satellite:h300

「:map」の代わりに「:satellite」を記述するとデフォルトで航空写真を表示します。

「:h**」や「:w**」(**部分は整数)のように縦幅(h)もしくは横幅(w)を指定することで、任意のサイズの地図を表示することができます。
※地図の縦横比は4:3に固定。
※「:h**」と「:w**」を両方指定することはできない。

▼「map:x[経度]y[緯度]:hybrid:h300」と記述した場合

(例)map:x139.715466y35.724398:hybrid:h300

:hybrid」を記述するとデフォルトで地図と航空写真を重ねたハイブリッド表示になります。