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

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - .htaccess mod_rewrite for dynamic url which has domain names -

Website Login Issue developed in magento -