map Div element automatically hide

[chammypantaleon]

When I load my site the div element doesn't show but when I inspect element it shows div id="map" style="height: 0px; position: relative; overflow: hidden;"

Here's my js:
initMap: function(){
map = new GMaps({
el: '#map',
lat: 14.5507605,
lng: 121.0512538
});

        map.addMarker({
            lat: 14.5357706,
            lng: 121.0614928,
            title: 'Binalot',
            details: {
                database_id: 42,
                author: 'HPNeo'
            },
            click: function(e){
                if(console.log)
                    console.log(e);
                alert('You clicked in this marker');
            },
            mouseover: function(e){
                if(console.log)
                    console.log(e);
            }
        });

        map.addMarker({
            lat: 14.5265026,
            lng: 121.0620442,
            title: 'Recovery Food',
            infoWindow: {
                content: '<p>HTML Content</p>'
            }
        });

[samuraijane]

I ran into this problem, as well. For me the issue was caused by this line of code in my component's .html file

<div #gmap style=”width:100%;height:400px”></div>

Notice that the quote marks are slanted (yea, I copied and pasted this code from a tutorial). For some reason this caused Angular to add the following markup above my code:

<div _ngcontent-c2="" style="position: relative; overflow: hidden;">

When I corrected the slanted quote marks to be straight, Angular no longer added the div with overflow: hidden and the problem was solved.

This thread also mentions issues with what going on with inline styles.