Как добавить смещение местоположения в автозаполнение Google Адресов: Javascript API

Question

У меня есть поле автозаполнения мест, которое я использую, чтобы пользователи указывали местоположение. Форма автозаполнения работает, но она НЕ смещает местоположение, как я хочу. У меня есть следующий код:

function activatePlacesSearch() {
  var input = document.getElementById('project-location-input');
  var location = {lat: 53.2910591, lng: -6.1823276};
  var radius = 1000;
  var autocomplete = new google.maps.places.Autocomplete(input, location, radius);
  google.maps.event.addListener(autocomplete, 'place_changed', function(e) {
      const place = autocomplete.getPlace();
      lat = place.geometry.location.lat();
      lng = place.geometry.location.lng();
      // draw the map
      document.getElementById('new-project-map-div').style.display = 'block'
      var map = new google.maps.Map(document.getElementById('new-project-map-div'), {
      zoom: 15,
      center: new google.maps.LatLng(lat, lng),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl:false,
      disableDefaultUI: true,
    });

// Set marker position
  var myMarker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      draggable: false
    });


  map.setCenter(myMarker.position);
  myMarker.setMap(map);
  });

}

Я знаю, что вы можете сделать запрос следующим образом, и он работает: https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=20&location=53.2910591, - 6.1823276 & radius = 5000 & key = AIzaSyC8sJYstB5U0fi8UdiHHAlG4tHVDuX_e-o

Я бы хотел выполнить sh, используя мой код, но я здесь что-то не так делаю.

Answer 1

После некоторой следственной работы вот что я придумал. Кажется, что если вы не отображаете карту в DOM (она может быть расположена вне поля зрения, если вы не хотите ее видеть), то это не будет работать правильно. Вот пример, который я нашел в JSFiddle

// сниппет

var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 39.742347, lng: -104.941121}, //Denver, CO
    zoom: 12
  });

И вот мой пример CodeSandbox с использованием вашей песочницы и некоторых указателей из пример выше.

Answer 2

Одним из вариантов будет использование AutocompleteOption.bounds. Если все, что вам известно, это местоположение и радиус, вы можете создать круг и вызвать на нем getBounds (нет задокументированного способа смещения автозаполнения javascript с указанием местоположения и радиуса).

var location = {lat: 53.2910591, lng: -6.1823276};
  var radius = 1000;
  var circle = new google.maps.Circle({
    center: location,
    radius: radius
  });
  var autocomplete = new google.maps.places.Autocomplete(input, {
    bounds: circle.getBounds()
  });

подтверждение концепции скрипта

фрагмент кода:

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function activatePlacesSearch() {
  var input = document.getElementById('project-location-input');
  var location = {lat: 53.2910591, lng: -6.1823276};
  var radius = 1000;
  var circle = new google.maps.Circle({
    center: location,
    radius: radius
  });
  var autocomplete = new google.maps.places.Autocomplete(input, {bounds: circle.getBounds()});
  google.maps.event.addListener(autocomplete, 'place_changed', function(e) {
      const place = autocomplete.getPlace();
      console.log(place);
      lat = place.geometry.location.lat();
      lng = place.geometry.location.lng();
      // draw the map
      document.getElementById('new-project-map-div').style.display = 'block'
      var map = new google.maps.Map(document.getElementById('new-project-map-div'), {
      zoom: 15,
      center: new google.maps.LatLng(lat, lng),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl:false,
      disableDefaultUI: true,
    });

// Set marker position
  var myMarker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      draggable: false
    });

  map.setCenter(myMarker.position);
  myMarker.setMap(map);
  });

}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#new-project-map-div {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div class="pac-card" id="pac-card">
  <div id="pac-container">
    <input id="project-location-input" type="text"
        placeholder="Enter a location">
  </div>
</div>
<div id="new-project-map-div"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=activatePlacesSearch"
        async defer></script>

Answer 3

Взгляните на этот раздел в своих документах: Google Места автозаполнения смещения местоположения . Возможно, вы сможете воспользоваться параметрами strictbounds и components.

Если это не приблизит вас к тому, что вы пытаетесь выполнить, sh, разместите ссылку на CodeSandbox с вашим примером, и я могу помочь вам разобраться.

Ура! 100