[MOSTLY SOLVED] -- Thanks everyone!
Aha! I think I've finally caught the error, by moving both of the
infowindow and infowindowAdd variables (as well as the htmlAdd
variable) outside of load() I got this error:
Uncaught TypeError: Cannot call method 'close' of undefined
(anonymous function)n0space_map.js:135
request.onreadystatechange
Which for some reason was not appearing before. But then I could see
that I had tried to implement an edit based on Chad's work above, so I
removed it (an extra marker. on infowindowAdd) and the close feature
worked!
However, I get this other error, which doesn't make a whole lot of
sense to me as this is something straight from the tutorial.
Here's the final code just in case (note I made a separate js doc for
this, so no page html is here):
//<![CDATA[
// old icon http://labs.google.com/ridefinder/images/mm_20_blue.png
var customIcons = {
individual: {
icon: 'n0space_individual.png',
shadow: 'http://labs.google.com/ridefinder/images/
mm_20_shadow.png'
},
group: {
icon: 'n0space_group.png',
shadow: 'http://labs.google.com/ridefinder/images/
mm_20_shadow.png'
}
};
var berkeley = new google.maps.LatLng(37.871771, -122.258949);
var htmlAdd = "<table>" +
"<tr><td>Name:</td> <td><input type='text' id='name'>
</td> </tr>" +
"<tr><td>Contact:</td> <td><input type='text'
id='contact'></td> </tr>" +
"<tr><td>Comment:</td> <td><input type='text'
id='comment'></tr> </
tr>" +
"<tr><td>Type:</td> <td><select id='type'>" +
"<option value='individual' SELECTED>Individual</
option>" +
"<option value='group'>Group</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save &
Close' onclick='saveData()'></td></tr>";
var infoWindow = new google.maps.InfoWindow;
var infowindowAdd = new google.maps.InfoWindow({
content: htmlAdd});
// Edited
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: berkeley,
zoom: 12,
mapTypeIds: ['n0space'] // changed to "Ids" added full
MapTypeId.ROADMAP and added 'n0space'
});
// Change this depending on the name of your PHP file
downloadUrl("n0space_genxml2.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 contact = markers[i].getAttribute("contact");
var comment = markers[i].getAttribute("comment");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<table>" +
"<tr><td><b>" + name + "</b></td></tr>" +
"<tr><td>" + contact + "</td></tr>" +
"<tr><td>" + comment + "</td></tr>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
google.maps.event.addListener(map, "click", function(event)
{
marker = new google.maps.Marker({
position: event.latLng,
map: map,
icon: 'n0space_add.png'
});
google.maps.event.addListener(marker, "click", function() {
infowindowAdd.open(map, marker);
});
});
//styles added
var styledMapOptions = {
name: "n0space"
}
var jayzMapType = new google.maps.StyledMapType(
stylez, styledMapOptions);
map.mapTypes.set('n0space', jayzMapType);
map.setMapTypeId('n0space');
//end styles added
}
//moved from inside load() to outside, to make variables global so
falls within scope of downloadUrlAdd (but still doesn't work?)
//end moved from inside load()
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
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, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
function saveData() {
var name = escape(document.getElementById("name").value);
var contact = escape(document.getElementById("contact").value);
var comment = escape(document.getElementById("comment").value);
var type = document.getElementById("type").value;
var latlng = marker.getPosition();
var url = "n0space_addrow.php?name=" + name + "&contact=" +
contact +
"&comment=" + comment +
"&type=" + type + "&lat=" + latlng.lat() + "&lng=" +
latlng.lng();
downloadUrlAdd(url, function(data, responseCode) {
if (responseCode == 200 && data <= 1) {
infowindowAdd.close();
document.getElementById("message").innerHTML = "Location
added.";
}
});
}
function downloadUrlAdd(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() {}
//]]>
On Dec 14, 4:00 pm, mattsenate <[email protected]> wrote:
> First, how do I check what arguments downloadUrlAdd() returns? I'm
> trying to use Chrome's Developer Tools and Javascript Console, but
> can't seem to figure it out.
>
> Second, to make sure we're talking about the same code, I'm just going
> to copy + paste, though it's still accessible at the link I gave
> beforehttp://www.thegutenberg.com/n0space/
>
> function saveData() {
> var name = escape(document.getElementById("name").value);
> var contact = escape(document.getElementById("contact").value);
> var comment = escape(document.getElementById("comment").value);
> var type = document.getElementById("type").value;
> var latlng = marker.getPosition();
>
> var url = "n0space_addrow.php?name=" + name + "&contact=" +
> contact +
> "&comment=" + comment +
> "&type=" + type + "&lat=" + latlng.lat() + "&lng=" +
> latlng.lng();
> downloadUrlAdd(url, function(data, responseCode) {
> if (responseCode == 200 && data.responseText <= 1) {
> marker.infowindowAdd.close();
> document.getElementById("message").innerHTML = "Location
> added.";
> }
> });
> }
>
> function downloadUrlAdd(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);
> }
> };
>
> On Dec 14, 2:39 pm, Rossko <[email protected]> wrote:
>
>
>
>
>
>
>
> > > outside of load() entirely. But submitting a new entry by clicking
> > > "save&close" does notclosethe infowindowAdd.
>
> > I think
> > if ( .... == 200 && data.responseText <= 1)
> > crashes in your callback ; have a look at what your downloadUrlAdd()
> > returns as its second argument ; its just a string, already acted on
> > by .responseText() method. Maybe you need to check its length.
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
