Pourquoi ma carte Google Map n'apparaît-elle pas lorsque je règle la division du conteneur sur 100 % de largeur et de hauteur ?

Résoudre les problèmes de dimensionnement des DIV du conteneur Google Maps avec des dimensions à 100 %

Lors de l'intégration d'une carte Google Map dans une page Web, il peut être difficile de obtenir un conteneur DIV qui occupe entièrement l'espace disponible. Ce problème survient lorsque les utilisateurs tentent de définir les propriétés de largeur et de hauteur du conteneur DIV à 100 %, ce qui entraîne une carte invisible.

原因：

Pour afficher une carte au sein du DIV, Google Maps nécessite une quantité limitée d'espace. L'attribution de dimensions de 100 % indique au DIV de se conformer aux dimensions de son conteneur parent. Si le conteneur parent lui-même n'est pas explicitement défini pour occuper la page entière, le DIV sera réduit à une taille plus petite, rendant la carte invisible.

解决方案：

Pour résoudre ce problème, il est nécessaire d'établir une chaîne de conteneurs parents qui ont tous une largeur de 100%. Cela garantit que le conteneur DIV de la carte dispose de suffisamment d’espace pour se développer et afficher entièrement son contenu. De plus, attribuez une valeur numérique (par exemple, 700 px) à la propriété height du conteneur DIV de la carte afin de fournir une hauteur minimale pour la carte.

示例代码：

<code class="css">body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%;
  height: 100vh;
}

div#map_canvas {
  height: 700px;
  width: 100%;
}</code>

En définissant le corps, le HTML et le contenu DIV sur 100 % de largeur et de hauteur, vous créez un conteneur qui couvre toute la page. Le map_canvas DIV remplit ensuite le contenu DIV tout en conservant une hauteur de 700px. Cette approche garantit que la carte est toujours visible et occupe l'espace prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!