html - Google map not showing in div -


i have google map div shows when define height in pixels not percentage; in examples try setting height 100%.

i have read few sof answers suggest parent div heights must set have done targeting of map's parent divs in css can see, map not show. can help?

here code does work:

            <div id="map-wrapper">                 <div id="map-canvas"></div>             </div> 


html, body, #map-wrapper #map-canvas {     margin: 0;     padding: 0;     height: 840px;     width: 100%;  } 


here code not work:

            <div id="map-wrapper">                 <div id="map-canvas"></div>             </div> 


html, body, #map-wrapper #map-canvas {     margin: 0;     padding: 0;     height: 100%;     width: 100%;  } 

javascript:

        var map;         function initialize() {             var mapoptions = {                 zoom: 8,                 center: new google.maps.latlng(-34.397, 150.644)                 };                 map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);         }         google.maps.event.adddomlistener(window, 'load', initialize); 

keep in mind height of 100% need set parent elements 100% height.

in my fiddler1 map @ html -> body -> div#map-wrapper -> div#map-canvas. each element must have height 100%.

so added map-wrapper div css:

html, body, #map-wrapper, #map-canvas {     margin: 0;     padding: 0;     height: 100%;     width: 100%; } 

your existing css #map-wrapper #map-canvas (notice missing comma!) leave out surrounding div.

1 added no api key error alert, , debugging gave map red background.


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -