Я начинающий javaScript разработчик, поэтому прошу не пинать строго за данный вопрос. Имеется следующий javaScript код:
window.onload = function () {
var $ = function (id) {
return document.getElementById(id)
}
var button = document.querySelectorAll ('input[type=button]')
button[0].addEventListener('click', function () {
var pos = $('address1');
var maps = $('map1');
var hotel = $ ("hotel1");
var btn = button[0];
showPosition(pos, maps, hotel, btn);
});
button[1].addEventListener('click', function () {
var pos = $('address2');
var maps = $('map2');
var hotel = $ ("hotel2");
var btn = button[1];
showPosition(pos, maps, hotel, btn);
});
button[2].addEventListener('click', function () {
var pos = $('address3');
var maps = $('map3');
var hotel = $ ("hotel3");
var btn = button[2];
showPosition(pos, maps, hotel, btn);
});
button[3].addEventListener('click', function () {
var pos = $('address4');
var maps = $('map4');
var hotel = $ ("hotel4");
var btn = button[3];
showPosition(pos, maps, hotel, btn);
});
var flag = true;
function showPosition(pos, maps, hotel, btn) {
if (flag == true){
var address = pos.textContent;
if (address) {
// используем API Google Maps для геокодирования адреса
// настраиваем объект Geocoder
var geocoder = new google.maps.Geocoder();
// возвращаем координаты с помощью функции geocode
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var lat = results[0].geometry.location.lat();
var long = results[0].geometry.location.lng();
var position = new google.maps.LatLng(lat, long);
// параметры для карты.
var options = {
zoom: 15,
center: position, // позиция расположения на карте
mapTypeId: google.maps.MapTypeId.ROADMAP // тип карты - ROADMAP, SATELLITE, HYBRID and TERRAIN
};
// объект карты.
var map = new google.maps.Map(maps,options);
// маркер
var marker = new google.maps.Marker({
position: position,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: hotel
});
// присвоение обработчика на нажатие по маркеру.
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
//делаем блок с картой видимым
maps.style.visibility = "visible";
maps.style.display = "block";
maps.style.height = "200px";
maps.style.width = "100%";
}
else {
error('Google не возвратил результатов.');
}
} else {
error("Геокодирование завершилось ошибкой - " + status);
}
});
// меняем значение кнопки и флага
btn.value = "Скрыть карту"
flag = false;
}
}
else {
var map = "";
maps.style.visibility = "hidden";
maps.style.display = "none";
btn.value = "Посмотреть местоположение на карте";
flag = true;
}
}
}
Проблема в флажке - переключателе var flag. При данном коде на странице, когда я нажимаю, например, на кнопку 1 переменная flag становится false не только для кнопки 1, но и для всех остальных кнопок. В результате этого при нажатии например, на кнопку 2 сразу после нажатия один раз на кнопку 1 (или на любую другую кнопку), чтобы сработала задача "посмотреть местоположение на карте" я вынужден щёлкать дважды, т.к. после нажатия на любую другую кнопку первый раз flag принимает значение false для всех кнопок. А хотелось бы разделить значение переменной flag для каждой кнопки отдельно, но как это сделать, без дублирования одной и той же функции несколько раз я, к сожалению, понять не могу. Заранее спасибо за помощь!