Помогите разобраться с google maps и geocomplete

Я использовал гугл карты для получения координат в форме на своем сайте. Вот как выглядел скрипт карт:

  function initMap2() {
    var lat = document.getElementById('course_latitude').value;
    var lng = document.getElementById('course_longitude').value;

  // if not defined create default position
  if (!lat || !lng){
      lat=49.26;
      lng=32.3;
      document.getElementById('course_latitude').value = lat;
      document.getElementById('course_longitude').value = lng;
  }
  var myCoords = new google.maps.LatLng(lat, lng);
  var mapOptions = {
  center: myCoords,
  zoom: 14
  };
  var map = new google.maps.Map(document.getElementById('map2'), mapOptions);
  var marker = new google.maps.Marker({
      position: myCoords,
      animation: google.maps.Animation.DROP,
      map: map,
      draggable: true
  });
  // refresh marker position and recenter map on marker
  function refreshMarker(){
      var lat = document.getElementById('course_latitude').value;
      var lng = document.getElementById('course_longitude').value;
      var myCoords = new google.maps.LatLng(lat, lng);
      marker.setPosition(myCoords);
      map.setCenter(marker.getPosition());
  }
  // when input values change call refreshMarker
  document.getElementById('course_latitude').onchange = refreshMarker;
  document.getElementById('course_longitude').onchange = refreshMarker;
  // when marker is dragged update input values
  marker.addListener('drag', function() {
      latlng = marker.getPosition();
      newlat=(Math.round(latlng.lat()*1000000))/1000000;
      newlng=(Math.round(latlng.lng()*1000000))/1000000;
      document.getElementById('course_latitude').value = newlat;
      document.getElementById('course_longitude').value = newlng;
  });
  // When drag ends, center (pan) the map on the marker position
  marker.addListener('dragend', function() {
      map.panTo(marker.getPosition());
  });
}
    document.addEventListener("DOMContentLoaded", initMap2);

Но появилась необходимость так же добавить поле для ввода адреса с автокомплитом. Для этого я использовал geocomplete:

  $("#address").geocomplete({
  map: "#map2"
});

Но привязка к карте не работает. Тогда я удалил эти строчки из скрипта:

    var lat = document.getElementById('course_latitude').value;
    var lng = document.getElementById('course_longitude').value;

И привязка заработала, но до момента ввода адреса карта не отображается, вместо нее серый квадрат. Как я могу сделать активной карту еще до ввода адреса? Так же, после ввода адреса (когда карта с маркером появилась) я не могу передвигать маркер, он закреплен к введенному адресу. Как я могу сделать что бы не только маркер обновлял позицию при вводе нового адреса, но и наоборот, что бы адрес в поле обновлялся при передвижении маркера?


Ответы (0 шт):