thehorseisbrown thehorseisbrown - 2 months ago 9
Javascript Question

appendChild not working in google maps

Why is element A invisible? It seems that appendChild() function is ignored. I can only see the B element. (element A is visible if I push it inside the controls) :(

var a = document.createElement('A');
a.style.width = '50px';
a.style.height = '50px';
a.style.cursor = 'pointer';
a.style.backgroundColor = 'rgba(10,20,30,1.0)';

var b = document.createElement('B');
b.style.width = '200px';
b.style.height = '200px';
b.style.backgroundColor = 'rgba(230,230,230,0.6)';

b.appendChild(a);
map.controls[google.maps.ControlPosition.LEFT].push(b);

Answer

Your problem is that you have to display both the elements on a block level

var a = document.createElement('A');
a.style.width = '50px';
a.style.height = '50px';
a.style.cursor = 'pointer';
a.style.backgroundColor = 'rgba(10,20,30,1.0)';
a.style.display = 'block'; //style block level

var b = document.createElement('B'); 
b.style.width = '200px';
b.style.height = '200px';
b.style.backgroundColor = 'rgba(230,230,230,0.6)';
b.style.border = '1px solid black';
b.style.display = 'block'; //style block level

document.body.appendChild(b);
b.appendChild(a);

https://jsfiddle.net/9rnzbuqh/