Adding unique info windows to markers and updating a database to store the info (google map api)

Question

I am currently coding a travel website that will allow a user to click on a map, resulting in a marker going into that location. From here I wish for the user to apply an info window to that particular marker with details such as Country, City, Duration, Comments. However when I code this, the info window will appear but the data is not unique, the data the user enters and saves shows over the next marker the exact same. So for example, say the user clicks Ireland, when they click England, and go to edit that marker the marker will have all the Ireland information in it. How do i make this unique?

here is my HTML code:

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

Reinitialize the infowindow content when you create a new marker:

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);
    });
});