Document.getElementById가 Google지도 정보 창에서 작동하지 않습니다.

Question

두 개의 Google지도 API 자습서를 하나의지도에 결합하려고합니다. 이 하나 https://google-developers.appspot.com/maps/documentation/javascript/examples/map-geolocation 이 하나 https://developers.google.com/maps/articles/phpsqlajax_v3

내가 샘플 페이지에 표시된 각각 두 개의지도를 가지고 사용하고 지금은 하나를 갖고 싶어. 모든 것은 데이터베이스에 내용을 저장하려고 할 때를 제외하고 작동합니다. 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() {} 

Answer 1

내가 당신을 말할 수는 없지만, 문서의 waterHTML의 숨겨진 노드 복사 내부의 쓰레기가있다.

getElementById()은 문서에서 주어진 ID로 첫 번째 요소를 검색하므로 항상 원하는 값 대신이 사본의 값을 가져옵니다. 이 사본은 첫 번째 버튼 클릭 이후 어떻게 든 제거됩니다.

제안은 :

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