html - Making a reponsive map -
i'm trying make responsive map. here code have:
<div class="maincontent"> <div class="map-holder"> <div class="map"> <div class="row1"> <div class="part1"> </div> </div> .... </div> </div> </div> .maincontent{position:relative;} .map-holder{width:100%; height:100% position:absolute; left:0; top:0; overflow:hidden;} .map{width:2000px; height:2000px; position:absolute; left:0; top:0;} .row1{display:block;} .part1{background-img:"path part of map";}
all parts of map within "map" div. want show small part of map adjusting size of "map-holder". when set height , width number 200px, not responsive. , when use percent adjust size, nothing shown in browser.
please me this! how can adjust size of "map-holder", remains responsive across different screen resolutions?
i remember first starting google maps api , having trouble little problem css or divs
surrounding make disappear. have code:
html:
<div id="mapwrap"> <div id="map-canvas"> </div> </div>
where map placed inside map-canvas
.
css:
html, body{ height:100%; width:100%; } #mapwrap{ position: relative; width: 100%; height:100%; padding-bottom: 100%; /* ratio 16:9 ( 100%/16*9 = 56.25% ) */ } #map-canvas{ position: absolute; top: 0; right: 0; bottom: 0; width:100%; height:100vh; left: 0; margin: 0; padding: 0; }
and gives me responsive map on web page itself. then, need add content around it.
i need play specific case more understand what's going on it. maybe code now.
Comments
Post a Comment