Делаю форму добавления адресов на карту и хочется сделать её универсальной - чтобы можно было вводить данные как по адресу, координатам, так и в ручную перемещением маркера. Причем так, чтобы это все можно было делать одновременно: человек ввел примерный адрес - сразу маркер на карте отобразился - перетащил его на точный адрес - координаты обновились.
Собственно функции для каждого этапа уже реализовал, но нужно
1) объединить это все
2) сделать очистку маркеров
Скрипт:
var geocoder;
var map;
var marker
// Карта + передвижной маркер с обновлением координат
function initialize() {
geocoder = new google.maps.Geocoder();
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//Добавляем маркер
marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true
});
google.maps.event.addListener(
marker,
'drag',
function() {
document.getElementById('lat').value = marker.position.lat();
document.getElementById('lng').value = marker.position.lng();
}
);
}
// Определяем местоположение по координатам
function codeLatLng() {
var input = document.getElementById("lat").value;
var input2 = document.getElementById("lng").value;
var lat = parseFloat(input);
var lng = parseFloat(input2);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable:true
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert("Ничего не найдено.");
}
} else {
alert("Ошибка геокодера! Причина: " + status);
}
});
}
// Определяем местоположение по адресу
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable:true
});
} else {
alert("Ошибка геокодера! Причина: " + status);
}
});
}
HTML:
Адрес: <input class="inputText" name="address" id="address" size="50" type="text" value="" onblur="if (this.value.length>0) {codeAddress(this.value);}" />
Координаты: <input name="lat" id="lat" type="text" value="" class="inputText" /> Широта
<input name="lng" id="lng" type="text" value="" class="inputText" onblur="if (this.value.length>0) {codeLatLng(this.value);}" /> Долгота
Карта: <div id="map_canvas" style="width: 100%; height: 300px"></div>
Примечание:
Вопрос в начале: как сделать? 1) объединить это все
2) сделать очистку маркеров
Важнее второй пункт
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.