Google Maps изменяет содержимое infowindow

Question

У меня есть куча маркеров с infowindows на моих картах google. Первоначально я установил контент на что-то с помощью <input type="text" ...> и кнопки отправки. На кнопке отправки onclick="return submitForm();" я вызываю функцию, которая должна изменить содержимое инфоиндуна, которое оно делает. Но когда я закрываю infowindow и открываю его снова, текст сбрасывается. Как я могу заставить его остаться? infowindow.setContent("This HTML content is being reset after reopening the infowindow");

infowindow.open(map, marker);

Спасибо большое!

_

Edit:

Initialization:

function addCoordinate(lat, lon, text){ 
    var marker = new google.maps.Marker({ 
     position: (new google.maps.LatLng(lat, lon)), 
     title: '#' + path.getLength(), 
     map: map, 
     icon: image3 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent('<input type="text" id="wpname" value="'+ name +'" style="width:200px"><input type="hidden" id="wplat" value="'+ lat +'"><input type="hidden" id="wplon" value="'+ lon +'"><input type="submit" value="OK" onclick="return submitForm();"><br>'+ text +'<br><a href="javascript:removeCoordinate('+lat+', '+lon+');">Remove</a>'); 
     infowindow.open(marker.get('map'), marker); 
    }); 
} 

Функция будет называться:

function submitForm() { 
    infowindow.setContent("This HTML content is being reset after reopening the infowindow"); 
    infowindow.open(map, marker); 
} 

Всякий раз, когда я нажимаю кнопку отправить содержание должно меняться от вида к «Этот HTML-контент сбрасывается [...]». Когда я закрою окно и снова открою его, должно появиться сообщение «Этот HTML-контент сбрасывается [...]».

В настоящее время он возвращается к форме с помощью кнопки отправки.

Answer 1

Вы должны сохранить контент таким образом, чтобы вы могли получить отношение к клику. Лучше всего было бы хранить его непосредственно в качестве свойства маркера (и обновить этот маркер-свойство в submitForm)

function initialize() { 
 

 
    var goo = google.maps, 
 
    map = new goo.Map(document.getElementById("map-canvas"), { 
 
     center: new goo.LatLng(-34.397, 150.644), 
 
     zoom: 8 
 
    }), 
 

 
    infowindow = new google.maps.InfoWindow; 
 

 
    function addCoordinate(lat, lon, text) { 
 
    var node = document.createElement('div'), 
 
     marker = new goo.Marker({ 
 
     position: (new goo.LatLng(lat, lon)), 
 

 
     map: map, 
 
     content: node 
 
     }); 
 
    node.innerHTML = 
 
     '<input type="text" id="wpname" value="' + name + '" style="width:200px">' + 
 
     '<input type="hidden" id="wplat" value="' + lat + '">' + 
 
     '<input type="hidden" id="wplon" value="' + lon + '">' + 
 
     '<input type="submit" value="OK" ><br>' + text + 
 
     '<br><a href="#">Remove</a>'; 
 

 
    function submitForm() { 
 
     marker.set('content', 'This marker has been stored'); 
 
     goo.event.trigger(marker, 'click') 
 
    } 
 

 
    function removeCoordinate() { 
 
     marker.setMap(null); 
 
    } 
 

 
    goo.event.addDomListener(node.querySelector('input[type=submit]'), 'click', submitForm) 
 
    goo.event.addDomListener(node.querySelector('a'), 'click', removeCoordinate) 
 

 

 
    goo.event.addListener(marker, 'click', function() { 
 
     infowindow.setContent(this.get('content')); 
 
     infowindow.open(marker.get('map'), marker); 
 
    }); 
 
    } 
 
    goo.event.addListener(map, 'click', function(e) { 
 
    addCoordinate(e.latLng.lat(), e.latLng.lng(), 'some text'); 
 
    }); 
 

 
    window['alert']('click on the map to add a marker') 
 

 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0 
 
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script> 
 

 
<div id="map-canvas"></div>