I have script that initiates a google map, i get no errors through the console upon initialization of the first instance of that function, though I have a link that resets the coordinates of the map to different stores, upon recalling the function with the new coordinates I get an Argument 1 of Node.appendChild is not an object. error for the following

    function CustomZoomControl(controlDiv, map) {
        //grap the zoom elements from the DOM and insert them in the map 
        var controlUIzoomIn= document.getElementById('cd-zoom-in'),
            controlUIzoomOut= document.getElementById('cd-zoom-out');
        controlDiv.appendChild(controlUIzoomIn);
        controlDiv.appendChild(controlUIzoomOut);

        // Setup the click event listeners and zoom-in or out according to the clicked element
        google.maps.event.addDomListener(controlUIzoomIn, 'click', function() {
            map.setZoom(map.getZoom()+1)
        });
        google.maps.event.addDomListener(controlUIzoomOut, 'click', function() {
            map.setZoom(map.getZoom()-1)
        });
    }

    var zoomControlDiv = document.createElement('div');
    var zoomControl = new CustomZoomControl(zoomControlDiv, map); 

i cant figure out why the DOM object works fine in the first instance of the function but not when it is recalled

I have script that initiates a google map, i get no errors through the console upon initialization of the first instance of that function, though I have a link that resets the coordinates of the map to different stores, upon recalling the function with the new coordinates I get an Argument 1 of Node.appendChild is not an object. error for the following

    function CustomZoomControl(controlDiv, map) {
        //grap the zoom elements from the DOM and insert them in the map 
        var controlUIzoomIn= document.getElementById('cd-zoom-in'),
            controlUIzoomOut= document.getElementById('cd-zoom-out');
        controlDiv.appendChild(controlUIzoomIn);
        controlDiv.appendChild(controlUIzoomOut);

        // Setup the click event listeners and zoom-in or out according to the clicked element
        google.maps.event.addDomListener(controlUIzoomIn, 'click', function() {
            map.setZoom(map.getZoom()+1)
        });
        google.maps.event.addDomListener(controlUIzoomOut, 'click', function() {
            map.setZoom(map.getZoom()-1)
        });
    }

    var zoomControlDiv = document.createElement('div');
    var zoomControl = new CustomZoomControl(zoomControlDiv, map); 

i cant figure out why the DOM object works fine in the first instance of the function but not when it is recalled

• javascript
• jquery

• which line is giving this issue? also can you put console.log(controlDiv) before appending and after appending? – gurvinder372 Commented Apr 16, 2016 at 9:58
• controlDiv.appendChild(controlUIzoomIn); controlDiv.appendChild(controlUIzoomOut); – Faisal Sadagah Commented Apr 16, 2016 at 9:59
• How can two lines give error? JS execution will stop after first error itself – gurvinder372 Commented Apr 16, 2016 at 10:00
• error is on line controlDiv.appendChild(controlUIzoomIn); – Faisal Sadagah Commented Apr 16, 2016 at 10:01
• can you check if either of them is Not a valid Node? share the output of console.log(controlDiv);console.log(controlUIzoomIn); before the line that throws error. – gurvinder372 Commented Apr 16, 2016 at 10:03

2 Answers 2

As per the ments above, controlUIzoomIn is null.

So, when you invoke appendChild with null value as the argument then this error is thrown.

Argument 1 of Node.appendChild is not an object

couldnt figure out why it was giving me null - but i did know it was throwing an error upon recalling the function - somehow i didnt see this solution earlier but i just placed the original variable initialization outside the function and it worked