Php Document.getElementById不'；不能在谷歌地图信息窗口中工作

所以我尝试将两个GoogleMapsAPI教程合并成一个地图。和

我曾经在示例页面上显示两个地图，现在我想要一个。除了我尝试将内容保存到数据库时，其他一切都正常工作

document.getElementbyId

不会从信息窗口中的表单返回任何内容，只返回坐标

当地图是分开的，但当它们在一起时，它不起作用

这是我组合的代码：

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

var自定义图标={
蓝色：{
图标：'http://labs.google.com/ridefinder/images/mm_20_blue.png',
影子：'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
红色：{
图标：'http://labs.google.com/ridefinder/images/mm_20_red.png',
影子：'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
var位置信息窗口；
var定位标记；
函数初始化（）{
//从水中获取html
var waterHTML=“为什么水在您的社区中很重要？”+
"" +
“姓名：”+
“学校：”+
“原因：”+
"";
//设置图
var map=new google.maps.map（document.getElementById（“map”）{
中心：新google.maps.LatLng（37.926868，-104.501953），
缩放：5，
mapTypeId:“路线图”
});
//从数据库中启动标记
var infoWindow=new google.maps.infoWindow；
//根据PHP文件的名称更改此选项
下载XMLURL（'mapxml.php'，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i“+地址+”
“+数学；
var icon=customIcons['blue']|{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
icon:icon.icon，
阴影：icon.shadow
});
bindInfoWindow（标记、地图、infoWindow、html）；
}
});
//试试HTML5地理定位
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos=新的google.maps.LatLng（position.coords.latitude，
位置坐标经度）；
locationInfowindow=新建google.maps.InfoWindow({
内容：waterHTML
});
locationMarker=新建google.maps.Marker({
真的，
职位:pos,，
地图：地图，
标题：“水上活动”
});
位置信息窗口。打开（地图、位置标记）；
地图设置中心（pos）；
}，函数（）{
手持导航（真）；
});
}否则{
//浏览器不支持地理位置
手动定位（假）；
}
}
函数bindInfoWindow（标记、地图、infoWindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
}
函数下载XMLURL（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数handleNogeLocation（errorFlag）{
如果（错误标志）{
var content='您的浏览器不支持地理位置。'+'
'+
“为什么水在你们社区很重要？”+
"" +
“姓名：”+
“学校：”+
“原因：”+
"";
}否则{
var content='错误：您的浏览器不支持地理位置。'+'
'+html；
}
变量选项={
地图：地图，
位置：新google.maps.LatLng（37.926868，-104.501953），
内容：内容
};
locationInfowindow=新建google.maps.InfoWindow（选项）；
地图设置中心（选项位置）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
函数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；
控制台日志（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）；
下载url（url、函数（数据、响应代码）{
控制台日志（“inurl”）；
//如果（responseCode==200&&data.length我不能确切地告诉您为什么会发生这种情况，但是文档中有一些垃圾，一个隐藏的waterHTML节点副本

getElementById（）
检索文档中具有给定ID的第一个元素，因此您总是获取此副本的值，而不是所需的值。单击第一个按钮后，此副本将以某种方式被删除

建议：您可以从返回的节点列表中检索最后一项，而不是IDs使用名称属性：

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

我不能确切地告诉您为什么会发生这种情况，但是文档中有一些垃圾，一个隐藏的waterHTML节点副本

getElementById（）
检索文档中具有给定ID的第一个元素，因此您总是获取此副本的值，而不是所需的值。单击第一个按钮后，此副本将以某种方式被删除

建议：您将能够检索最后一项，而不是IDs使用名称属性