Document.getElementById doesn't work in Google Maps info window

Question

So I'm trying to combine two Google Maps API tutorials into one map. This documentation and this one .

I use to have two maps for each displayed on the sample page and now I want to have one. Everything works except for when I try to save the content to the database. document.getElementbyId doesn't return anything from the form in the info window just the coordinates.

It works when the maps are separate but not when they are together.

This is the code that I combined:

var customIcons = {
  blue: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  red: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  }
};

var locationInfowindow;
var locationMarker;

function initialize() {
//get the html from the water
    var waterHTML = "Why is water important in your community?" +
            "<table>" +
             "<tr><td>Name:</td> <td><input type='text' id='watername'/> </td> </tr>" +
             "<tr><td>School:</td> <td><input type='text' id='wateraddress'/></td> </tr>" +
             "<tr><td>Reason:</td> <td><input type='text' id='waterreason'/> </td></tr>" +
             "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";


//setup Map 
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(37.926868, -104.501953),
    zoom: 5,
    mapTypeId: 'roadmap'
  });

  //start the markers from the database
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadXMLUrl('mapxml.php', function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("school");
      var math = markers[i].getAttribute("reason");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/> <i>" + address + "</i><br/>" +math ;
      var icon = customIcons['blue'] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });

        //Try HTML5 geolocation
  if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);

     locationInfowindow = new google.maps.InfoWindow({
        content: waterHTML
     });

     locationMarker = new google.maps.Marker({
        draggable: true,
        position: pos,
        map: map,
        title: 'Water Event'
    });

    locationInfowindow.open(map,locationMarker);
            map.setCenter(pos);
      }, function() {
        handleNoGeolocation(true);
      });

    } else {
      // Browser doesn't support Geolocation
      handleNoGeolocation(false);
    }

}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}


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

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

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



 function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
      var content = 'Your browser doesn\'t support geolocation.' + '</br>'+
            "Why is water important in your community?” " +
            "<table>" +
             "<tr><td>Name:</td> <td><input type='text' id='watername'/> </td> </tr>" +
             "<tr><td>School:</td> <td><input type='text' id='wateraddress'/></td> </tr>" +
             "<tr><td>Reason:</td> <td><input type='text' id='waterreason'/> </td></tr>" +
             "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
    } else {
      var content = 'Error: Your browser doesn\'t support geolocation.' + '</br>' + html;
    }

    var options = {
      map: map,
      position: new google.maps.LatLng(37.926868, -104.501953),
      content: content
    };

    locationInfowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
  }

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

function saveData() {

  var watername = escape(document.getElementById("watername").value);

  console.log(watername);
  var wateraddress = escape(document.getElementById("wateraddress").value);

  console.log(wateraddress);
  var waterreason = document.getElementById("waterreason").value;
  console.log(waterreason);

  var latlng = locationMarker.getPosition();

  var url = "phpsqlinfo_addrow.php?name=" + watername + "&school=" + wateraddress + "&reason=" + waterreason + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();

  console.log(url);

  downloadUrl(url, function(data, responseCode) {

  console.log("inurl");
   // if (responseCode == 200 && data.length <= 1) {
      locationInfowindow.close();
      document.getElementById("message").innerHTML = "Location added. Refresh to see your addition!";
   // }
  });
}


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() {}

Answer 1

I can't tell you exactly why this happens, but there is some garbage inside the document, a hidden node-copy of the waterHTML.

getElementById() retrieves the first element with a given ID in a document, so you always get the value of this copy instead of desired value. This copy will be removed somehow after the first button-click.

Suggestion: Instead of IDs use name-attributes, you will be able to retrieve the last item from the returned nodeList:

  var waternames = document.getElementsByName("watername");
  var watername = escape(waternames[waternames.length-1].value);
  //the same for waterreason and wateraddress