web-dev-qa-db-fra.com

Google Maps avec Bootstrap non réactif

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>
htmlcssgoogle-maps-api-3twitter-bootstrap
41
waely

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:

  • Google Map sensible
  • OpenStreetMap responsive
  • Vidéo Vimeo sensible
  • Vidéo Youtube réactive

Démo: http://jsfiddle.net/LHQQZ/135/

86
Andrei Surdu

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>
22
Leonardo

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

10
chech

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.

6
Spider

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>
5
horizontala

Vous pouvez donner à la classe span6 une largeur et une hauteur, puis à map_canvas une largeur et une hauteur de 100%.

0
Piet van Dongen
<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>
0
jaymar

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>
0
Remington Charles