title: Document.getElementById doesn't work in Google Maps info window
body: <p>So I'm trying to combine two Google Maps API tutorials into one map.  <a href="https://google-developers.appspot.com/maps/documentation/javascript/examples/map-geolocation" rel="nofollow noreferrer">This documentation</a> and <a href="https://developers.google.com/maps/articles/phpsqlajax_v3" rel="nofollow noreferrer">this one</a>. </p>
  
  <p>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.  <code>document.getElementbyId</code> doesn't return anything from the form in the info window just the coordinates. </p>
  
  <p>It works when the maps are separate but not when they are together. </p>
  
  <p>This is the code that I combined:</p>
  
  <pre><code>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?" +
              "&lt;table&gt;" +
               "&lt;tr&gt;&lt;td&gt;Name:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='watername'/&gt; &lt;/td&gt; &lt;/tr&gt;" +
               "&lt;tr&gt;&lt;td&gt;School:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='wateraddress'/&gt;&lt;/td&gt; &lt;/tr&gt;" +
               "&lt;tr&gt;&lt;td&gt;Reason:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='waterreason'/&gt; &lt;/td&gt;&lt;/tr&gt;" +
               "&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='button' value='Save &amp; Close' onclick='saveData()'/&gt;&lt;/td&gt;&lt;/tr&gt;";
  
  
  //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 &lt; 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 = "&lt;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt; &lt;i&gt;" + address + "&lt;/i&gt;&lt;br/&gt;" +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.' + '&lt;/br&gt;'+
              "Why is water important in your community?” " +
              "&lt;table&gt;" +
               "&lt;tr&gt;&lt;td&gt;Name:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='watername'/&gt; &lt;/td&gt; &lt;/tr&gt;" +
               "&lt;tr&gt;&lt;td&gt;School:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='wateraddress'/&gt;&lt;/td&gt; &lt;/tr&gt;" +
               "&lt;tr&gt;&lt;td&gt;Reason:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='waterreason'/&gt; &lt;/td&gt;&lt;/tr&gt;" +
               "&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='button' value='Save &amp; Close' onclick='saveData()'/&gt;&lt;/td&gt;&lt;/tr&gt;";
      } else {
        var content = 'Error: Your browser doesn\'t support geolocation.' + '&lt;/br&gt;' + 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 + "&amp;school=" + wateraddress + "&amp;reason=" + waterreason + "&amp;lat=" + latlng.lat() + "&amp;lng=" + latlng.lng();
  
    console.log(url);
  
    downloadUrl(url, function(data, responseCode) {
  
    console.log("inurl");
     // if (responseCode == 200 &amp;&amp; data.length &lt;= 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() {}
  </code></pre>