ブログに使える、Googleマップを静的に表示する方法

佐々里峠の位置図

上の地図は、Google Static Maps API を使って佐々里峠の位置を示したものです。これは、JavaScript や動的なページを読み込まずに、Google マップを静的(画像化)してブログに埋め込んでいます。この静的(画像化)することには、以下のような利点があります。

  1. ブログの表示が速くなる。
  2. スマートフォンの画面で地図を指で拡大縮小ができる。
  3. 地図画像をアップロードする必要がない。
  4. 地図の拡大縮小やその他の表示が数値で変更できる。
  5. 著作権の問題をクリアできる。

Google maps の動的な表示と静的な表示

Google マップをウエブサイトで使う場合には、Google maps の埋め込み用HTML コードを取得して貼り付ける方法が一般的です。こんなの ↓


大変便利で簡単ですがスマートフォンだと、ページが重くなってイライラの原因になります。これは、「動的な表示」のためです。同じ場所を「静的な表示」に変えて表示したのがこれ ↓

静的表示
どうですか、スマートフォンで見ると動作の違いがよく分かると思います。指で広がったりしますよね。こちらは座標データを利用して、Google マップを静的に画像化したものです。

Google マップの静的な表示の方法

静的に画像化する方法は、意外なほど簡単です。難しく考えずにレシピ(基本のHTMLコード)を用意してチン!(数字を入力)すれば出来上がります。例えばマーカー表示1ヶ所のHTML のコードは、このようになります。

<img title=”■” alt=”■” src=”http://maps.googleapis.com/maps/api/staticmap?center=■,■&zoom=■&size=■x■&scale=1&maptype=■&markers=color:■%7Clabel:A%7C■,■&sensor=false” />

■ の部分に数値などを入れると地図が表示されます。

基本のHTMLコード

それでは、■ の部分に各データ(赤字部分)を入れてみましょう。

<img title=”大阪城” alt=”大阪城” src=”http://maps.googleapis.com/maps/api/staticmap?center=34.687216,135.525799&zoom=13&size=625x420&scale=1&maptype=roadmap&markers=color:red%7Clabel:T%7C34.687216,135.525799&sensor=false” />

表示してみます。

大阪城

zoomの数値部分を変更して表示

<img title=”大阪城” alt=”大阪城” src=”http://maps.googleapis.com/maps/api/staticmap?center=34.687216,135.525799&zoom=8&size=625×420&scale=1&maptype=roadmap&markers=color:red%7Clabel:T%7C34.687216,135.525799&sensor=false” />

&zoom=13 → &zoom=8 へ変更する。

大阪城

縦横の幅の数値を変更して表示

&size=625x420 → &size=200x100&scale

大阪城

基本のHTMLコードを分解して解説します。

各パーツの数値を変更すると、表示内容が変わることが分かったと思います。それでは、もう少し詳しく分解して解説してみます。

  • src=”http://maps.googleapis.com/maps/api/staticmap? ⇒ グーグルの地図を使いますよ。
  • center=34.687216,135.525799 ⇒ 中心の座標はここですよ。
  • &zoom=13 ⇒ ズームは13ですよ。
  • &size=625x420 ⇒ サイズは、横625pxで縦420pxですよ。
  • &scale=1 ⇒ 縮尺は1(通常)ですよ。
  • maptype=roadmap ⇒ 道路地図タイプの表示ですよ。(satellite: 航空写真、terrain: 地形図、hybrid: 航空写真と道路地図の組み合わせ)
  • &markers=color:red ⇒ マーカーの色は赤ですよ。(black,brown,green,purple,yellow,blue,gray,orange,white から指定)
  • %7Clabel:T ⇒ マーカーの中は「T」を表示しますよ。(半角英数一文字)
  • %7C34.687216,135.525799 ⇒ マーカーの位置の座標はここですよ。

[tip]自分のブログに合わせて基本のHTMLコードを作って置いて、座標のデーターだけを入れるようにすると楽々になります。[/tip]

複数のマーカーを表示してみよう!

何となく要領が分かってきたら、次はマーカーを複数打つ表示方法を説明します。これは基本コードに表示したいマーカーの位置の座標を加えるだけです。以下は、A~D の4ヶ所にマーカーを打っています。パターン化しているのが分かると思います。

<img alt=”めっちゃ有名な酷道の峠郡” src=”http://maps.googleapis.com/maps/api/staticmap?center=35.157707454534,135.79995089716&zoom=14&size=625×417&scale=1&maptype=roadmap&markers=color:blue%7Clabel:A%7C35.162271043264,135.80964671069&markers=color:red%7Clabel:B%7C35.153069413034,135.79537831107&markers=color:blue%7Clabel:C%7C35.15041248963,135.78519484995&markers=color:blue%7Clabel:D%7C35.158780685217,135.78605325608&sensor=false” />

表示してみましょう。

めっちゃ有名な酷道の峠郡

[tip]もちろん、画像なのでリンクも張れますよ!クリックしてみて下さい。数が増えてもパターンが変わらないので、座標とマーカーの色と文字を変えればいいだけですね。[/tip]

座標(緯度・経度)データーの取得方法

最後に緯度・経度(座標データー)の取得方法ですが、これも簡単です。大阪城の天守閣の位置を例に説明します。

Google の地図の場合

Google の地図サイトから大阪城天守閣の座標を取得する方法を例に説明します。

  1. 大阪城天守閣の位置を右クリックから中心に設定します。
  2. 左手のリンクマークをクリックしてウェブサイトへの地図埋め込み用 HTML コードのURLをコピーします。
  3. 下記の赤字部分が座標データーです。

<iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”https://maps.google.co.jp/maps?hl=ja&amp;ie=UTF8&amp;ll=34.685963,135.525777&amp;spn=0.012316,0.019205&amp;t=m&amp;z=16&amp;brcurrent=3,0x6000e73098799cf5:0xb07f1c0e2b45d0f5,1&amp;output=embed”></iframe><br /><small><a href=”https://maps.google.co.jp/maps?hl=ja&amp;ie=UTF8&amp;ll=34.685963,135.525777&amp;spn=0.012316,0.019205&amp;t=m&amp;z=16&amp;brcurrent=3,0x6000e73098799cf5:0xb07f1c0e2b45d0f5,1&amp;source=embed” style=”color:#0000FF;text-align:left”>大きな地図で見る</a></small>

国土交通省国土地理院のウオッちずの場合

  1. ウオッ地図から目的の位置を中心(+)にセッティング
  2. 上部のこの位置へのリンク http://watchizu.gsi.go.jp/watchizu.html?longitude=135.5258273175&latitude=34.687430097348 の赤字部分が座標
  3. 『,』半角で区切る。⇒ 34.687430097348,135.5258273175

上記の2通りが主な座標の取得方法ですが、私はウオッちずを利用しています。
[warning]座標の使い方で迷わない、ここだけは押さえておきたいポイント!

  1. 座標には、「世界測地系」と「日本測地系」の2種類がある。
  2. 必ず『世界測地系』の座標を使う。
  3. 緯度,経度(半角コンマで区切る)

座標が2種類あることが、混乱の原因になります。例えば、日本測地系の座標を世界測地系(WGS 84)の地図サイトやナビゲーションで座標検索しても、同位置を指さずにずれが生じます。

  • 世界測地系(Google map、ウオッちず、Yahoo!地図、など)
  • 日本測地系(Mapionなど)

ポイント!標準的な『 世界測地系 』に、統一して使おう![/warning]

編集後記

今回、ご紹介した『ブログに使える、Googleマップを静的に表示する方法』ですが、ネットやサイト構築に縁遠い全くの素人が書いたものなので表現等について、おかしい点があるかもしれませんがご容赦して下さい。座標は、この他にも便利な使い方があるので機会があればご紹介したいと思います。

さて、先週はセロー250で青山高原の周辺を探索してきましたが、がけ崩れに倒木の道路封鎖に、泥濘(ぬかるみ)と散々なツーリングでした。次回からは、この様子を綴って参ります。

LINEで送る
Pocket