Map Isn't Showing on Google Maps JavaScript API V3 When Nested in a Div Tag

Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag

Add style="width:100%; height:100%;" to the div see what that does

not to the #map_canvas but the main div

example

<body>
    <div style="height:100%; width:100%;">
         <div id="map-canvas"></div>
    </div>
</body>

There are some other answers on here the explain why this is necessary

Cannot generate Google Map

I don't know why but yes, when i try to check your code i found that you didn't add css of body and html given by google map. When i add that it shows content inside it. CSS code i found is below-

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

Please check and respond

Google Maps div not showing up in JSBin

Use can use absolute positioning without a width | height value, using top|left|bottom|right with 0 set as their values which would result in the #map-canvas div becoming the size of the containing element #second as long as it is set to relative like so:

#second {
    position: relative;
}

#map-canvas { 
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

Here is the updated bin.

I hope this helps!

Google map inside multiple divs not showing

Update:

Strangely enough, I've made it work by referencing all my CSS and JavaScript codes on the <head> of my webpage (the CSS codes were referenced on the <head> but the JavaScript codes were referenced before the </body>).

I am not sure if which of my JavaScript codes influenced Google Map to act like that, but well, if it's working then it ain't stupid!

My map is created but can not be displayed

Make sure you have changed your CSS class name to map1

#map1 {
    height: 300px;
    width: 600px;
    background-color: #CCC;
}

working code with map1 as id in css file Jsfiddle

Map Isn't Showing on Google Maps JavaScript API V3 When Nested in a Div Tag