Passing a Marker as variable in OnClick returns [Object object] instead of a Marker object

Question

I've got a popup form that appears when clicking on certain markers in a Leaflet map. Once the form is finished, I'd like to send the fields entered, as well as some details about the marker, to a separate function. I've started with just sending the marker for now to test it out, but I've run into an issue.

But when I go to pass my marker through the function and run it through console.log, it returns [Object object] instead of a marker with details about latitude, longitude, and other things.

var newMarker = new VietMarker (map.getCenter(), {
    draggable: true
});

var popupHTML = '<form id="add-marker-form">' +
                        '<div class="form-group">' +
                            '<label for="marker-title">Title</label>' +
                            '<input type="text" class="form-control" id="marker-title" required="true">' +
                        '</div>' +
                        '<div class="form-group">' +
                            '<label for="marker-contributor">Contributor</label>' +
                            '<input type="text" class="form-control" id="marker-contributor">' +
                        '</div>' +
                        '<div class="form-group">' +
                            '<label for="marker-yt-link">Video link</label>' +
                            '<input type="text" class="form-control" id="marker-yt-link">' +
                        '</div>' +
                        '<div class="form-group">' +
                            '<label for="marker-description">Description</label>' +
                            '<textarea class="form-control" rows="3" id="marker-description"></textarea>' +
                        '</div>' +
                        '<input type="button" id="marker-submit" class="btn btn-primary btn-block" onClick="testMarker(\'' + newMarker + '\');" value="Add to Map" />' +
               '</form>';

newMarker.bindPopup(popupHTML).addTo(map);

And in my testMarker() function:

function testMarker (markerToAdd) {
    console.log(markerToAdd);
}

Returns [Object object] in console.log, with no sub-fields, instead of a Marker object.

I don't see you calling testMarker. That would just console whatever you pass to it. Why even have such a function? — StackSlave
I call testMarker with my button at the end of the form. The syntax is really long so it's scrolled horizontally. I have the function because I wanted to see if it was even being passed what it should be - in the console, I should be able to see the latitude and longitude properties of the marker - but it just says [Object object] and that's it. — user4660280
Try running console.log("Some string... " + newMarker + " ...another string");, and you'll start understanding what's causing the problem :-) — IvanSanchez

Julien V Julien V · Accepted Answer · 2017-04-06T20:09:55

When you generate the popup HTML, the concatenation operator (+) makes you insert the newMarker variable as a string. That's the mistake. At this moment, newMarker is transformed into a string and the inserted value is "[Object object]".

You need to find another way to pass the marker to the function you call on button click.

You could have a hashtable of markers :

markers = {};
markers['new'] = new VietMarker (map.getCenter(), {
    draggable: true
});

var popupHTML = '<form>.........'+
                '<input type="button" id="marker-submit" class="btn '+
                'btn-primary btn-block" onClick="testMarker(\'new\');" '+
                'value="Add to Map" />';

markers['new'].bindPopup(popupHTML).addTo(map);

function testMarker (id) {
    console.log(markers[id]);
}

Passing a Marker as variable in OnClick returns [Object object] instead of a Marker object

1 Answers