google map APIの Place Autocompleteでサジェストされたテキストをそのままフィールドに入れられない

###前提・実現したいこと
表題のAPIを利用して、テキストを入力して目的地を検索する機能を作っています（javascript）
利用API
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete?hl=ja

実装自体は一応完了しているのですが、フォームに入力したテキストから、提案されるtextをクリックすると、サジェストされた文字ではなく、変換されたaddressの文字が入力されてしまいます。

※添付参照（APIドキュメントより）
入力フォームに記載したワードに応じて、候補地がサジェストされる。今回は赤枠でしめした「札幌ドーム専用駐車場」をクリック

クリック後、期待している「札幌ドーム専用駐車場」というワードではなく、詳細な住所が反映されている

実現したいことはこのサジェストされた文字列が、そのままiputタグに反映されて欲しいです。
APIのリファレンスを読み込んだのですが、どうにもうまくいかず、、どなたかお知恵を拝借できれば幸いです。

###該当のソースコード

var hoge;

hoge = new google.maps.places.Autocomplete(input);

hoge.addListener('place_changed', function() {
  return input.value
});

###試したこと
課題に対してアプローチしたことを記載してください

このAPIがもってるメソッドのgetPlace()をつかって

var hoge;

hoge = new google.maps.places.Autocomplete(input);

hoge.addListener('place_changed', function() {
  return hoge.getPlace().name

という形にしたのですが、
この場合、一部のワードではほぼ期待した動きをするのですが、ワードによっては英語の表記が返ってくるため、このままでは使えず苦労しております、、、、

行動規範の内容に同意します

回答1件

input.valueにthis.getPlace().nameを代入すればいいのではないかと思いましたが、ダメでしたでしょうか。
とりあえずサンプルコードを置いておきますね。

サンプル

javascript
1var map = new google.maps.Map(document.getElementById('map'), {
2  center: {lat: 35.659024, lng: 139.703498},
3  zoom: 13
4});
5var input = /** @type {!HTMLInputElement} */(
6    document.getElementById('pac-input'));
7hoge = new google.maps.places.Autocomplete(input, {
8  componentRestrictions: {country: 'jp'},
9  types: ['establishment'],
10});
11hoge.addListener('place_changed', function() {
12  input.value = this.getPlace().name;
13});

CSS
1#map {
2  height: 300px;
3  width:300px;
4}

HTML
1<input id="pac-input" class="controls" type="text"
2    placeholder="Enter a location" size="30">
3<div id="map"></div>

投稿2017/03/16 11:31

Lhankor_Mhy

総合スコア37438

maru0101

2017/03/17 03:25

回答ありがとうございます！ input.value = this.getPlace().name; と componentRestrictions: {country: 'jp'}, types: ['establishment'], をつけてみたのですが、英語表記でかえってきてしまい、期待通りの動きにならないようです。。その他想定される、オプション等もしお考えのものがありましたらご教授いただけますでしょうか？