Results of reverse geocoding

Choose a result:



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)


<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);
  infoWnd = new google.maps.InfoWindow();
  infoWnd.setContent("Please drag me.");
  infoWnd.open(null, requestMarker);
  //Reverse geocode
  google.maps.event.addListener(requestMarker, "dragstart", function(mouseEvt){
  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");
    for (var i = 0; i < results.length; i++) {
            border: "1px solid gray",
          width: "100%"
        .text("geocodeResult = " + i)
      var idx = $(this)[0].selectedIndex;
      var geocodeResult = results[idx];
      $("#jsonPanel").text(YAHOO.lang.JSON.stringify(geocodeResult, null, 4));
    chooseResult.selectedIndex = 0;
  } else {
    alert("Code:" + status);
function showMap(geocodeResult) {
  var geometry = geocodeResult.geometry;
  var viewport = geometry.viewport;
  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);

Google Maps API Programming Guide

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