Search code examples
javascriptjquerygoogle-maps-api-3jsbin

Google Maps div not showing up in JSBin


If I set my width to 500px, I can get the map-canvas div to show up when I click my "get started" button. If I set my height/width to 100%, it doesn't show up.

I want to be sure my project will load on a mobile device so I don't want to use absolute dimensions.

http://jsbin.com/OpujukIF/1/edit?html,css,output


Solution

  • 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!