?

リバースジオコーディングの結果について

Choose a result:
GeocodingResponses:

	  
    

説明

このサンプルは、リバースジオコーディングの結果がどう違うのかを検証するためのものです。
まず、地図上の赤いマーカーをドラッグしてください。すると黄色いマーカーがGeocoderResult.geometory.locationの位置に現れます。
黒い四角の枠は、ビューポート(GeocoderResult.geometory.viewport)を示しています。

Googleのリバースジオコーディングサービスは、リクエストした位置(GeocoderRequest.location)に対して、複数の結果を返します。 その結果は地図上のパネルで見ることができます。 "geocodeResult = 0" は一番詳細な結果です。

通常、Googleは都心では正確な位置データを持っていますが、地方では時々、不正確なことがあります。
この例は、リクエストした位置と返されてきた位置にどれだけの差があるのかを確認するためのものです。


正確なロケーション(東京)

不正確なロケーション(北海道)



Code

<script type='text/javascript'>

var mapCanvas, geocoder, infoWnd;
var boundsBox, resultMarker;
function initialize() {
  var initPos = new google.maps.LatLng(35.658609, 139.745447);
  mapCanvas = new google.maps.Map(document.getElementById("map_canvas"), {
    center : initPos,
    zoom : 18,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  });
  
  var icon = new google.maps.MarkerImage();
  icon.url = "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|reverse%20location|FFB573|000000";
  icon.size = new google.maps.Size(145, 42);
  icon.anchor = new google.maps.Point(0, 42);
  var requestMarkerLabel = createMarker({
    map: mapCanvas,
    icon: icon,
    clickable: false
  });
  var requestMarker = createMarker({
    map: mapCanvas,
    position: initPos,
    draggable: true,
    zIndex: Infinity
  });
  requestMarkerLabel.bindTo("position", requestMarker);
  
  
  var icon = new google.maps.MarkerImage();
  icon.url = "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bbbr|geometry.location|C6EF8C|000000";
  icon.size = new google.maps.Size(162, 42);
  icon.anchor = new google.maps.Point(162, 42);
  var resultMarkerLabel = createMarker({
    map: mapCanvas,
    icon: icon,
    clickable: false
  });
  resultMarker = createMarker({
    clickable: false,
    icon: "https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=location|FFFF00"
  });
  resultMarkerLabel.bindTo("position", resultMarker);
  resultMarkerLabel.bindTo("map", resultMarker);
  
  boundsBox = new google.maps.Rectangle();
  boundsBox.bindTo("map", resultMarker);
  
  //infoWindow
  infoWnd = new google.maps.InfoWindow();
  infoWnd.setContent("Please drag me.");
  infoWnd.open(null, requestMarker);
  
  //Reverse geocode
  google.maps.event.addListener(requestMarker, "dragstart", function(mouseEvt){
    infoWnd.close();
  });
  
  google.maps.event.addListener(requestMarker, "dragend", function(mouseEvt){
    var request = {
      location: mouseEvt.latLng
    };
    geocoder = new google.maps.Geocoder();
    geocoder.geocode(request, callback_geododer);
  });
}
function callback_geododer(results, status){
  if (status == google.maps.GeocoderStatus.OK) {
    var chooseResult = $("#listPanel");
    chooseResult.empty();
    for (var i = 0; i < results.length; i++) {
      $(document.createElement("option")).css({
            border: "1px solid gray",
          width: "100%"
        })
        .text("geocodeResult = " + i)
        .appendTo(chooseResult);
    }
    chooseResult.change(function(){
      var idx = $(this)[0].selectedIndex;
      var geocodeResult = results[idx];
      $("#jsonPanel").text(YAHOO.lang.JSON.stringify(geocodeResult, null, 4));
      showMap(geocodeResult);
    });
    chooseResult.selectedIndex = 0;
    chooseResult.change();
    resultMarker.setMap(mapCanvas);
  } else {
    alert("Code:" + status);
    resultMarker.setMap(null);
  }
}
function showMap(geocodeResult) {
  var geometry = geocodeResult.geometry;
  var viewport = geometry.viewport;
  boundsBox.setBounds(viewport);
  mapCanvas.fitBounds(viewport);
  resultMarker.setPosition(geometry.location);
  infoWnd.setContent("<div style='overflow:visible;height:100px;'>formatted_address=<br>"+ geocodeResult.formatted_address + "</div>");
  infoWnd.open(null, resultMarker);
}
function createMarker(opts) {
  var marker = new google.maps.Marker(opts);
  return marker;
}
google.maps.event.addDomListener(window, "load", initialize);
</script>

サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら