Javascript String Unexpectedly Turning Into An object

Question

I've been working on a simple project involving Google Maps API. My friend wants a visitor map for his website where visitors can place a mark representing their location. These marks are also associated with data such as a name, a message etc. This data should be displayed in the InfoWindow when the mark is clicked upon.

So far its all working pretty good, but I am running into a bug that has stumped me.

When a user puts down a new point a function is called to generate a form specific for that object.

function setupForm(id){
    var content='<div class="gdform">'+
            '<form id='+id+'>'+
            '<ul>'+
            '<li><input type="text" id="userName" value="name" onfocus="value=\'\'"/></li>'+
            '<li><textarea rows ="15" cols="50" wrap="hard"></textarea></li>'+
            '</ul>'+
            '<input type="button" value="submit" onclick="markers.'+id+'.setData()"/>'+
            '<input type="button" value="cancel" onclick="setTimeout(function(){removeMark('+id+')}, 100)"/>'+
            '</form>'+
            '</div>';
return content;

}

Where id is the unique id for every mark on the map. The marks are stored in a hash table and can be reference with this id.

The problem here is coming from the cancel button. When pressed, it should close the InfoWindow, remove the marker from the map, and delete the marker from the the hash table. To do this it calls the function removeMark, which looks like this:

function removeMark(id){
   infoWindow.close()
   markers.id.mark.setMap(null);
   delete markers.id;

}

Here however, I receive a type error telling me that it can't read property mark of undefined.

In an attempt to debug the code I set a few some breakpoints, one in the setupForm function and the other in removeMark. When stepping through the code I noticed that while in setupForm , the js console identifies id as a string. When in removeMark however, the js console informs me that id has suddenly become an object.

I haven't been able to figure out why this should be. Here is all the code:

http://jsfiddle.net/39vKm/

Thanks for the help!

Answer 1

Alright... there are three problems with your code...

first of all, you're missing single quotations around the id in the onclick declatation on the cancel button. Second, you need to return false from the removeMark function and return removeMark in the onclick event on the button... (there is no need for the timeout)

CODE:

function setupForm(id){
    var content='<div class="gdform">'+
                '<form id='+id+'>'+
                '<ul>'+
                '<li><input type="text" id="userName" value="Whats your name?" onfocus="value=\'\'"/></li>'+
                '<li><textarea rows ="15" cols="50" wrap="hard"></textarea></li>'+
                   '</ul>'+
                '<input type="button" value="submit" onclick="markers.'+id+'.setData()"/>'+
                '<input type="button" value="cancel" onclick="return removeMark(\''+id+'\')"/>'+
                '</form>'+
                '</div>';
    return content;

}

Third, when removing the mark, you need to reference the marker using brackets on the array...

function removeMark(id){
    infoWindow.close()
    markers[id].mark.setMap(null);
    delete markers[id];
    return false;
}

Updated fiddle: http://jsfiddle.net/gislikonrad/39vKm/5/