изменить содержимое информационного окна карты v3

Я пытаюсь сделать возможным изменение содержимого, отображаемого внутри DIV, которое является содержимым информационного окна. Мне удалось изменить содержимое с Hello на YO внутри информационного окна. Проблема в том, что когда я закрываю информационное окно и снова открываю его, обновленное содержимое возвращается к исходному. Ниже мой код:

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
      if (event.type == google.maps.drawing.OverlayType.MARKER) {
          //event.overlay.setTitle("Hello");
          var infowindow = new google.maps.InfoWindow({
              content: '<div id="content" onmouseover="updateContent()">Hello</div>',
              maxWidth: 10
          });
          google.maps.event.addListener(event.overlay, 'click', function() {
              infowindow.open(map, event.overlay);
          });
      }
  });

  function updateContent() {
      document.getElementById('content').innerHTML = "Yo";
  }

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


javascript maps infowindow
person Tommy    schedule 05.09.2012    source источник

Ответы (3)


arrow_upward
12
arrow_downward

вы должны установить содержимое с помощью метода setContentHTML

var infowindow ;
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.MARKER) {
        //event.overlay.setTitle("Hello");
        infowindow = new google.maps.InfoWindow({
            content: '<div id="content" onmouseover="updateContent()">Hello</div>',
            maxWidth: 10
        });
        google.maps.event.addListener(event.overlay,'click',function()
        infowindow.open(map,event.overlay);
     });
}});

function updateContent(){
    infowindow.setContent("YO");
}
person Ramesh Kotha    schedule 05.09.2012
comment
Когда я пробовал это, я получаю сообщение об ошибке, что setContentHTML не является методом объекта Google infoWindow (я считаю, что это стандартный DHTML, но объект Google infoWindow не наследует его). Чтобы достичь цели ОП, я отсоединил существующее информационное окно, создал новый объект информационного окна с новым содержимым, а затем прикрепил его к существующему маркеру. - person Fat Monk; 06.05.2014
comment
Вместо этого вы можете использовать функцию infowindow.setContent(...), которая хорошо работает для меня :) - person ghedas; 10.06.2014
comment
Хорошая идентификация - person Daniel Cardenas; 23.03.2017
comment
Разве это не создаст информационное окно для каждого создаваемого наложения? Не могли бы вы просто создать одно информационное окно и обновлять его по мере необходимости? - person hungerstar; 24.01.2018

arrow_upward
14
arrow_downward

Я обнаружил, что принятый выше ответ не работает, так как мне пришлось использовать setContent() следующим образом:

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
    if (event.type == google.maps.drawing.OverlayType.MARKER) {
        //event.overlay.setTitle("Hello");
        var infowindow = new google.maps.InfoWindow({
            content: '<div id="content" onmouseover="updateContent()">Hello</div>',
            maxWidth: 10
        });
        google.maps.event.addListener(event.overlay, 'click', function () {
            infowindow.open(map, event.overlay);
        });
    }
});
function updateContent() {
    infowindow.setContent("Yo");
}
person Bron Thulke    schedule 04.09.2015

arrow_upward
1
arrow_downward

Лучше всего создавать содержимое InfoWindow не с помощью строки HTML, а с помощью элемента DOM. Итак, замените:

new google.maps.InfoWindow({
        content: '<div id="content" onmouseover="updateContent()">Hello</div>'
    });

с участием:

var domElement = document.createElement('div');
domElement.innerHTML = '<div id="content" onmouseover="updateContent()">Hello</div>';
new google.maps.InfoWindow({
        content: domElement
    });

Теперь вы можете легко получить доступ к div с помощью document.getElementById("content"); и выполнять все необходимые манипуляции с DOM.

person Lisa    schedule 04.04.2019
comment
Это заслуживает медали. Серьезно простое решение проблемы. Это решило проблему, на которую я бы потратил огромное количество времени, написав две строки кода. Спасибо. - person Johnroiste; 01.05.2021