Помогите разобраться с 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;
И привязка заработала, но до момента ввода адреса карта не отображается, вместо нее серый квадрат. Как я могу сделать активной карту еще до ввода адреса? Так же, после ввода адреса (когда карта с маркером появилась) я не могу передвигать маркер, он закреплен к введенному адресу. Как я могу сделать что бы не только маркер обновлял позицию при вводе нового адреса, но и наоборот, что бы адрес в поле обновлялся при передвижении маркера?