web-dev-qa-db-ja.com

GoogleマップのオートコンプリートAPIから郵便番号を取得する方法

だから私の問題は、結果が次のように吐き出されていることです：

1980 Mission Street、サンフランシスコ、CA、アメリカ合衆国

...しかし、郵便番号を取得するために必要です。これは、Googleのジオコーダーに戻すと、何らかの理由で位置が登録されないためです。

//これは、オートコンプリート入力フィールドだけのコードです

var input = document.getElementById('id_address');
var options = {
  types: ['address'],
  componentRestrictions: {country:'us'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);

//これは私がジオコーダを使用している方法です

window.onload = function initMap() {
            console.log("{{ task.address }}");
            console.log("{{ location }}");
            var address = "{{ location }}";

            geocoder = new google.maps.Geocoder();

            geocoder.geocode({ 'address': address }, function(results, status) {
                <!-- console.log(address); -->
              if (status == google.maps.GeocoderStatus.OK) {
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: results[0].geometry.location,
                    zoom: 12,
                  });
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                  });
              }


            });

        }

私は実用的な解決策を持っていますが、ユーザーは住所の各部分を個別に入力する必要があります。私はそれを変更して、1つの入力フィールドに入力し、そのアドレスをgecoder.geocode（）に書き込めるようにしています。

javascriptjquerygoogle-mapsgoogle-maps-api-3
9
Chris

autocompleteによって返される result にはaddress_components配列が含まれ、その1つのエントリのタイプは「postal_code」で、サンプルの住所（ "1980 Mission Street、Sanサンフランシスコ、カリフォルニア、アメリカ合衆国」）、94103が含まれています。

注：通常、市、郡、または州には複数の郵便番号があり、一意の郵便番号を取得する唯一の方法は、返された座標を逆ジオコーディングすることです、それが適切かどうかは、用途によって異なります。

概念実証のフィドル

function initialize() {
  var input = document.getElementById('id_address');
  var options = {
    types: ['address'],
    componentRestrictions: {
      country: 'us'
    }
  };
  autocomplete = new google.maps.places.Autocomplete(input, options);
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    for (var i = 0; i < place.address_components.length; i++) {
      for (var j = 0; j < place.address_components[i].types.length; j++) {
        if (place.address_components[i].types[j] == "postal_code") {
          document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;

        }
      }
    }
  })
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="id_address" type="text" size="100" value="1980 Mission Street, San Francisco, CA, United States" />Zip code:
<div id="postal_code"></div>
<div id="map_canvas"></div>
20
geocodezip