將唯一的信息窗口添加到標記中，並更新數據庫以存儲信息（Google Map API）

Question

我目前正在編寫一個旅游網站，該網站將允許用戶單擊地圖，從而使標記進入該位置。 在這里，我希望用戶將信息窗口應用於該特定標記，並帶有諸如國家/地區，城市，時長，注釋之類的詳細信息。 但是，當我編寫此代碼時，將出現信息窗口，但數據不是唯一的，用戶輸入並保存的數據在下一個標記上完全相同。 例如，假設用戶單擊愛爾蘭，然后單擊英格蘭，然后編輯該標記，則標記中將包含所有愛爾蘭信息。 我如何使它獨特？

這是我的HTML代碼：

function initialize() {
  var latlng = new google.maps.LatLng(54.5, -7.0);
  var options = {
    zoom: 7,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map"), options);
  var html = "<table>" +
             "<tr><td>Country:</td> <td><input type='text' id='country'/> </td> </tr>" +
             "<tr><td>City:</td> <td><input type='text' id='city'/></td> </tr>" +
             "<tr><td>Duration:</td> <td><input type='text' id='duration'/></td> </tr>" +
             "<tr><td>Category:</td> <td><select id='category'>" +
                "<option value='city' SELECTED>City Break</option>" +
                "<option value='beach'>Beach Holiday</option>" +
                "<option value='romantic'>Romantic Holiday</option>" +
                "<option value='activity'>Activity Holiday</option>" +
                "<option value='site'>Site Seeing</option>" +
                "</select> </td></tr>" +
             "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
 content: html
});

google.maps.event.addListener(map, "click", function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });
    google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
    });
});
}

function saveData() {
  var country = escape(document.getElementById("country").value);
  var duration = escape(document.getElementById("duration").value);
  var category = document.getElementById("category").value;
  var latlng = marker.getPosition();

  var url = "phpsqlinfo_addrow.php?country=" + country +  "&city" + city + "&duration=" + duration +
            "&category=" + category + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
  downloadUrl(url, function(data, responseCode) {
    if (responseCode == 200 && data.length >= 1) {
      infowindow.close();
      document.getElementById("message").innerHTML = "Location added.";
    }
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request.responseText, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}
</script>

Answer 1

創建新標記時，重新初始化信息窗口內容：

google.maps.event.addListener(map, "click", function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });
    infowindow.setContent(html);
    google.maps.event.addListener(marker, "click", function() {

      infowindow.open(map, marker);
    });
});