テスト
リバースジオコーディングの結果について
Choose a result:
GeocodingResponses:
GeocodingResponses:
テスト
説明
このサンプルは、リバースジオコーディングの結果がどう違うのかを検証するためのものです。
まず、地図上の赤いマーカーをドラッグしてください。すると黄色いマーカーがGeocoderResult.geometory.locationの位置に現れます。
黒い四角の枠は、ビューポート(GeocoderResult.geometory.viewport)を示しています。
Googleのリバースジオコーディングサービスは、リクエストした位置(GeocoderRequest.location)に対して、複数の結果を返します。
その結果は地図上のパネルで見ることができます。
"geocodeResult = 0" は一番詳細な結果です。
通常、Googleは都心では正確な位置データを持っていますが、地方では時々、不正確なことがあります。
この例は、リクエストした位置と返されてきた位置にどれだけの差があるのかを確認するためのものです。
![]() 正確なロケーション(東京) |
![]() 不正確なロケーション(北海道) |
<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>






