JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5で座標を地名に変換する方法|Google Maps APIによるリバースジオコーディング入門

リバースジオコーディングとは

HTML5で取得した緯度経度(座標)を地名に変換するには、Google Maps APIを使って「リバースジオコーディング(逆ジオコーディング)」を実行します。

ジオコーディングとは、人間が読める形式の住所を、地図上の場所(緯度・経度)へ変換する処理のことです。

その逆、つまり地図上の位置情報を人間が読める住所に変換する処理はリバースジオコーディングと呼ばれます。GPSで取得した現在地の座標から住所を表示したい場合などに活用される技術です。

マップの初期化例

まず、緯度と経度を指定してマップを初期化する基本的な例を見てみましょう。

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: {lat: 20.502, lng: -22.765}
    });
}

zoomプロパティで地図の拡大率を、centerプロパティで地図の中心となる緯度(lat)と経度(lng)をそれぞれ指定しています。

リバースジオコーダーが照合できる情報

Google Maps APIのリバースジオコーダーは、与えられた座標に対して以下のような階層的な住所情報を照合して返します。

  • 都道府県・州
  • 市区町村
  • 町名・地区
  • 番地(通りまでの住所)
  • 郵便番号

このように、単純な座標値だけでは分からない「場所の意味」を、構造化された住所データとして取得できるのがリバースジオコーディングの大きな利点です。位置情報を活用したWebアプリケーションを開発する際には、ぜひ覚えておきたい基本機能といえるでしょう。

  1. HTML5 SVGのpolygonタグで星形を描く方法

    HTML5では、SVG(Scalable Vector Graphics)を使うことで、画像ファイルに頼らずにブラウザ上で直接ベクター図形を描画できます。この記事では、<polygon>(ポリゴン)タグを使用して、赤い星の形を描くシンプルなサンプルを紹介します。星形を描く仕組み星形は、<polygon>タグのpoints属性に5つの頂点の座標を「x,y」のペアで指定することで描画されます。各頂点が直線で結ばれ、閉じた多角形として表示されます。また、fill属性で塗りつぶしの色を指定できます。この例では「red」を指定しているため、赤い星として描画されます。サンプルコード

  2. MongoDBでIDを並べ替えてアイテムを逆順に取得する方法

    MongoDBでは、$naturalを使用するとドキュメントが自然順(natural order)で返されます。この順序を逆にしたい場合は、$natural:-1を指定します。サンプルコレクションの作成まず、ドキュメントを含むコレクションを作成しましょう。> db.demo710.insertOne({id:101,Name:"Robert"}); { "acknowledged" : true, "insertedId" : ObjectId("5ea83a855d33e20ed1097b7a&quo