javascript - 加载时从谷歌地图中的字段获取值

Question

我正在使用 Google map Place Autocomplete Hotel Search显示用户位置附近所有酒店的服务。

我为此做了一个演示，它在我的机器上运行良好。但我的要求是在页面加载时获取用户字段数据并在页面加载时显示最近的酒店。

例如目前发生的情况是，仅当我在文本框中输入某些区域/城市时，它才会显示最近的酒店。

我的研发代码。这是init函数的代码

function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: countries['in'].zoom,
          center: countries['in'].center,
          mapTypeControl: false,
          panControl: false,
          zoomControl: false,
          streetViewControl: false
        });

        infoWindow = new google.maps.InfoWindow({
          content: document.getElementById('info-content')
        });

        // Create the autocomplete object and associate it with the UI input control.
        // Restrict the search to the default country, and to place type "cities".
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */ (
                document.getElementById('autocomplete')), {
              types: ['(cities)'],
              componentRestrictions: countryRestrict
            });
        places = new google.maps.places.PlacesService(map);

        autocomplete.addListener('place_changed', onPlaceChanged);

        // Add a DOM event listener to react when the user selects a country.
        document.getElementById('country').addEventListener(
            'change', setAutocompleteCountry);
      }

输入字段的html是

  <div id="locationField">
      <input id="autocomplete" placeholder="Enter a city" type="text"  />
  </div>

那么我怎样才能获得值(value)并显示最近的加载酒店呢？ 例如:文本框的值为value="Ahmedab​​ad, Gujarat, India" 因此，页面加载时会显示所有距离艾哈迈达巴德最近的酒店。

你可以检查我的 fiddle Here 我还尝试了 Google 地理编码

var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': "Ahmedabad, Gujarat, India" }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
            });
        } else {
          alert("Problem with geolocation");
        }
      });

但这并没有显示仅将标记设置为艾哈迈达巴德的酒店。

Answer 1

您的 initMap 函数未正确启动。删除所有其他源代码并验证

function initMap() {alert("InitMap");}

另外，将您的 googleapi map js 加载为

<script async defer  src="https://maps.googleapis.com/maps/api/js?key=XXXX&libraries=places&callback=initMap">