?

Results of reverse geocoding

Choose a result:
GeocodingResponses:

	  
    

Description

This example describes how different each result of reverse geocoding.
First of all, drag the red marker on the map. After that, the yellow marker appears on the map, which is on the GeocoderResult.geometory.location position.
The black rectangle shows the viewport of the GeocoderResult.geometory.viewport.

Google reverse geocode service responses plural results in regard to the request location(GeocoderRequest.location). You can see that on the panel, which is next side of the map. "geocodeResult = 0" is the most detail of results.

In usually, Google has acculate location data in a big city, while in the countryside, sometimes it's inacculate.
This example use to confirm how distance between the request location and the response location.


Acculate result.(in Tokyo)

Inacculate result.(in Hokkaido)



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>

Search
Books
Google Maps API Programming Guide

Four Google Maps API Experts wrote this book. Introducing useful examples for developers!
See more details