after adding delete function , adding markers array save button/ save function no longer attached right infowindow on google map.
if open 2 infowindows, enter info in both, click save on first 1 opened update last infowindow created "you submitted" , save twice. tried few different things based on different stack overflow posts including adding iterator around initialization of infowindow , adding external function adding marker, did not work. made sure global variables (like map) declared before initializing. nube has been struggling days.
i'm sure issue surrounds confusion how infowindow attached markers in array. code in snippet below.
var markers = []; var uniqueid = 1; var marker; var infowindow; var map; var html; function initialize() { var mapoptions = { zoom: 8, center: { lat: 48.591130, lng: -119.682349 }, maptypecontroloptions: { maptypeids: ['roadmap'] } }; var map = new google.maps.map(document.getelementbyid("dvmap"), mapoptions); //attach click event handler map. google.maps.event.addlistener(map, 'click', function(e) { //determine location user has clicked. var location = e.latlng; //create marker , placed on map. var marker = new google.maps.marker({ position: location, map: map, }); //set unique id marker.id = uniqueid; uniqueid++; markers.push(marker); //attach click event handler marker. google.maps.event.addlistener(marker, "click", function(e) { html = "<p style='color:#173e43;font-size:120%;font-weight:bold;text-align:center; width:150pxs; margin-top: 2px; margin-bottom:4px' >add comment</p>" + "<table>" + "<tr><td>issue/idea:</td> <td> <textarea rows='1' cols='26' id='name' style='height: 30px; width:150px' name='reply'></textarea></td> </tr>" + "<tr><td>address:</td> <td><input type='text' id='address' style='width:150px'/></td> </tr>" + "</td></tr>"; html += "<tr><td><input type = 'button' value = 'delete' onclick = 'deletemarker(" + marker.id + ");' value = 'delete' /></td>" + "<td><input type='button' value='submit' onclick='savedata(" + marker.id + ")'/></td></tr>"; infowindow = new google.maps.infowindow({ content: html }); infowindow.setcontent(html); infowindow.open(map, marker); }); //add marker array. markers.push(marker); }); }; function deletemarker(id) { //find , remove marker array (var = 0; < markers.length; i++) { if (markers[i].id == id) { //remove marker map markers[i].setmap(null); //remove marker array. markers.splice(i, 1); return; } } }; function savedata(id) { (var = 0; < markers.length; i++) { if (markers[i].id == id) { var name = escape(document.getelementbyid("name").value); var address = escape(document.getelementbyid("address").value); var latlng = markers[i].getposition(); var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + "&lat=" + latlng.lat() + "&lng=" + latlng.lng(); downloadurl(url, function(data, responsecode) { if (responsecode == 200 && data.length >= 1) { document.getelementbyid("message").innerhtml = "location added. contents: name=" + name +", address=" + address+ " latlng=" +latlng; } }); infowindow.setcontent("you submitted contents: name=" + name +", address=" + address+ " latlng=" +latlng); } } } 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() {} } google.maps.event.adddomlistener(window, 'load', initialize);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script> <div id="dvmap" style="width: 1000px; height: 490px"></div> <div id="message"></div>
ok, moved push statement pushing marker array after declare infowindow. stopped save function saving html contents multiple times. save working great now, problem ability update right infowindow message "you submitted..." still updating last infowindow opened message.
var markers = []; var uniqueid = 1; var marker; var infowindow; var map; var html; function initialize() { var mapoptions = { zoom: 8, center: { lat: 48.591130, lng: -119.682349 }, maptypecontroloptions: { maptypeids: ['roadmap'] } }; var map = new google.maps.map(document.getelementbyid("dvmap"), mapoptions); //attach click event handler map. google.maps.event.addlistener(map, 'click', function(e) { //determine location user has clicked. var location = e.latlng; //create marker , placed on map. var marker = new google.maps.marker({ position: location, map: map, }); //set unique id marker.id = uniqueid; uniqueid++; //attach click event handler marker. google.maps.event.addlistener(marker, "click", function(e) { html = "<p style='color:#173e43;font-size:120%;font-weight:bold;text-align:center; width:150pxs; margin-top: 2px; margin-bottom:4px' >add comment</p>" + "<table>" + "<tr><td>issue/idea:</td> <td> <textarea rows='1' cols='26' id='name' style='height: 30px; width:150px' name='reply'></textarea></td> </tr>" + "<tr><td>address:</td> <td><input type='text' id='address' style='width:150px'/></td> </tr>" + "</td></tr>"; html += "<tr><td><input type = 'button' value = 'delete' onclick = 'deletemarker(" + marker.id + ");' value = 'delete' /></td>" + "<td><input type='button' value='submit' onclick='savedata(" + marker.id + ")'/></td></tr>"; infowindow = new google.maps.infowindow({ content: html }); infowindow.setcontent(html); infowindow.open(map, marker); }); //add marker array. markers.push(marker); }); }; function deletemarker(id) { //find , remove marker array (var = 0; < markers.length; i++) { if (markers[i].id == id) { //remove marker map markers[i].setmap(null); //remove marker array. markers.splice(i, 1); return; } } }; function savedata(id) { (var = 0; < markers.length; i++) { if (markers[i].id == id) { var name = escape(document.getelementbyid("name").value); var address = escape(document.getelementbyid("address").value); var latlng = markers[i].getposition(); var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + "&lat=" + latlng.lat() + "&lng=" + latlng.lng(); downloadurl(url, function(data, responsecode) { if (responsecode == 200 && data.length >= 1) { document.getelementbyid("message").innerhtml = "location added. contents: name=" + name +", address=" + address+ " latlng=" +latlng; } }); infowindow.setcontent("you submitted contents: name=" + name +", address=" + address+ " latlng=" +latlng); } } } 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() {} } google.maps.event.adddomlistener(window, 'load', initialize);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script> <div id="dvmap" style="width: 1000px; height: 490px"></div> <div id="message"></div>
Comments
Post a Comment