J'utilise bootstrap et j'ai intégré Google Maps API 3.
#map_canvas
n'est pas réactif; c'est une largeur fixe.
De plus, si j'utilise height: auto
et width: auto
, la carte ne s'affiche pas dans la page.
Pourquoi?
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
#map_canvas {
height: 400px;
width: auto;
}
</style>
<div class="container">
<div class="row">
<div class="span6">
<div id="map_canvas"></div>
</div>
</div>
</div>
RÉVISÉ: la poste officielle est obsolète, j'ai donc mis à jour ma réponse et amélioré le code.
La méthode suivante ne nécessite ni amorçage ni autre framework. Il peut être utilisé indépendamment pour rendre n'importe quel contenu réactif. Un bourrage est appliqué à l'élément parent en calculant le aspect ratio
. Ensuite, l'élément enfant est placé en haut en utilisant la position absolue.
Le HTML:
<div class="iframe-container">
<!-- embed code here -->
</div>
Le CSS:
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
Le 'violon' suivant a des exemples sur la façon de faire:
Ceci utilise la fonctionnalité Responsive Embed de Bootstrap avec un format d'image fixe de 16/9:
<div class="embed-responsive embed-responsive-16by9">
<div id="map_canvas" class="embed-responsive-item" style="border: 1px solid black"></div>
</div>
redimensionne la carte en hauteur et en largeur:
http://niklausgerber.com/blog/responsive-google-or-bing-maps/
Mise à jour 2018/09/27: le lien est apparemment en panne, je ne sais pas combien, alors je vais lier ma recherche d'archive web à son github
https://github.com/niklausgerber/responsive-google-or-bing-maps
Extrêmement simple. Rendez la carte relative à la hauteur de la fenêtre en utilisant CSS:
.map {
height: 80vh;
}
Cela spécifie que le conteneur .map doit représenter 80% de la hauteur de la fenêtre d'affichage.
Si quelqu'un d'autre regardait ça, avait un problème comme ça.
J'avais un iframe avec un openstreetmap et je ne pouvais pas le rendre réactif. J'ai finalement mis une classe "img-responsive" et tout était bien.
<iframe class="img-responsive" width="350" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="YOUR OPENSTREET URL HERE" style="border: 1px solid black"></iframe>
Vous pouvez donner à la classe span6
une largeur et une hauteur, puis à map_canvas
une largeur et une hauteur de 100%
.
<div class="map_container">
<div id="map" class="gmaps4Rails_map">
<div id="map_canvas" class="span9">
<%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>
</div>
</div>
La réponse de Smartik fonctionne bien. J'utilise le gem gmaps4Rails et applique ces modifications au css généré comme ceci:
.map_container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
display: block;
}
.gmaps4Rails_map {
display: block;
height: 400px;
}
Puis ajouté ces lignes à mon avis:
<div class="map_container">
<div id="map" class="gmaps4Rails_map">
<div id="map_canvas" class="span9">
<%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>
</div>
</div>
</div>