Comment créer une carte réactive pour un site Web

Étant donné que vous avez marqué votre requête comme HTML et Javascript, comme Mike l’a suggéré, le premier lien pour moi est : 5 façons d’ajouter des cartes Google Maps réactives à votre site Web[^]

Pour une simple carte Google, voici la méthode la plus simple de une autre référence ici[^]:

1. Accédez au site Web de Google Maps.
2. Recherchez l’emplacement que vous souhaitez afficher sur votre carte intégrée.
3. Cliquez sur Partager.
4. Cliquez sur Intégrer une carte pour voir un aperçu de l’intégration. Ici, vous pouvez basculer la zone de la carte, le zoom, le type (plan des rues ou carte satellite) et la taille (y compris une taille personnalisée si vous le souhaitez)
5. Lorsque vous êtes prêt à intégrer, cliquez sur Copier HTML.
6. Dans votre fichier HTML, collez le code d’intégration à l’endroit où vous souhaitez que la carte apparaisse sur la page. Le code ressemblera à ceci (il peut être différent selon la taille que vous avez choisie pour votre carte :
7. Enregistrez le fichier HTML et ouvrez-le dans un navigateur Web pour afficher la carte en action.
8. Rendre notre carte intégrée réactive avec un peu de HTML et de CSS supplémentaires
Code:
1. prenez votre code d’intégration existant et placez-le dans votre document HTML. Ensuite, enveloppez le <iframe> élément (qui représente la carte) dans un conteneur <div> avec la classe google-map.

<div class="google-map">
     <iframe src="[your unique google URL] " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

2. Ensuite, dans votre CSS, ajoutez le code suivant :

.google-map {
     padding-bottom: 50%;
     position: relative;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}

Pour créer une carte sur un site Web qui s’adapte à la taille de l’écran, vous pouvez utiliser l’API JavaScript de Google Maps ou une autre bibliothèque de cartographie. Placez simplement le code de la carte dans un conteneur div.

<div id="map-container"></div>

Appliquez les principes de conception à l’aide de CSS, comme l’utilisation de largeurs basées sur un pourcentage. Pour contrôler différentes tailles d’écran, vous pouvez envisager d’utiliser des requêtes multimédias comme ci-dessous :

#map-container {
    height: 60vh; /* Adjust the height as needed */
    width: 100%;
}