Ввод текста в глобальное информационное окно

Question

Этот вопрос расширяет ответ здесь, который используетdomready, Расширение является попыткой включить второе информационное окно с немного другим именем: inwindow против infowindow, Первый вопрос, учитывая первое "правило" ответчика - "Создайте только один экземпляр объекта infowindow и используйте метод setContent() для изменения его содержимого". - может ли быть второй объект информационного окна?

Если так, то что не так с моей попыткой создания inwindow как показано ниже? inwindow появляется при нажатии на карту, но нажатие на кнопку "Отправить", похоже, ничего не делает.

Работающая версия JSFiddle.com находится здесь (по крайней мере, она показывает карту).

Некоторые глобальные переменные и объекты следующие.

var map
var infowindow = new google.maps.InfoWindow();
var inwindow = new google.maps.InfoWindow();
var markers = [];
var counter = 0;

initialize() выдержка следующая.

google.maps.event.addListener(map, 'click', function (event) {

    addMarker(event.latLng);
    });

google.maps.event.addListener(inwindow, 'domready', function () {
    var button = document.getElementById('inputButton');
    var input = document.getElementById('nameinput').value;
    button.onsubmit = function() {
    marker.title = input;
    inwindow.close();
    };
    });
google.maps.event.addListener(infowindow, 'domready', function () {
    var button = document.getElementById('deleteButton');
    var id = parseInt(button.getAttribute('data-id'));  
    button.onclick = function() {
    deleteMarker(id);
    };
    });
}

function addMarker(location) {

    counter++;

    var inputForm = 'Name:  <input type="text" id="nameinput" size="31" maxlength="31" tabindex="1"/>' + '<input type="button" id="inputButton" value="Submit">';

    var marker = new google.maps.Marker({
position: location,
map: map,
id: counter
});
inwindow.setContent(inputForm);
inwindow.open(map, marker);

markers.push(marker);

var deleteButton = '<button id="deleteButton" data-id="' + counter + '">Delete</button>';

google.maps.event.addListener(marker, 'rightclick', function () {
    infowindow.setContent(deleteButton);
    infowindow.open(map, marker);
    });
}

function deleteMarker(markerId) {
    for (var i=0; i<markers.length; i++) {
    if (markers[i].id === markerId) {
        markers[i].setMap(null);
    }
    }
}

Answer 1

Вы можете иметь столько информационных окон, сколько захотите. Правила, которые я вам дал, были больше похожи на подсказки (отсюда и курсивный шрифт). Вы всегда можете адаптировать его к вашим потребностям.

Теперь у вас есть несколько проблем в вашем коде:

1. onsubmit событие вызывается при нажатии кнопки отправки в форме. Действие должно быть на форме, а не на кнопке. Но у вас нет формы здесь. Ты можешь использовать onclick событие вместо (как для кнопки удаления).

2. Вы получаете входное значение, когда информационное окно готово (domready) не после того, как пользователь заполнил поле. Поэтому он всегда будет пустым.

3. Ты устанавливаешь marker.title = xxx но marker здесь нет, плюс вы должны использовать setTitle() способ изменить заголовок маркера.

4. Почему вы не использовали ту же технику, что я (и вы) использовали для действия кнопки удаления? (с использованием идентификатора и т. д.) Я предлагаю вам попытаться понять, что там происходит, и адаптировать его к той части, где вы устанавливаете заголовок маркера.

Если вы все еще застряли, дайте мне знать, и я объясню дальше!

Редактировать:

JSFiddle demo

Обратите внимание, что нет никакого tabindex, определенного на входах и кнопках, и что я использовал .focus() установить фокус на входе или кнопке при открытии информационного окна.

Надеюсь это поможет.