Une iframe responsive

L’<iframe> est un contenu de navigation imbriqué qui permet d’obtenir une page HTML intégrée dans la page courante. Cette <iframe> est responsive quand elle s’adapte à la taille de l’écran. Ici, je présente trois exemples d’intégration. Le css est identique pour les trois situations : je crée une classe site Le css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .

Street View sur ma famille

Lors de l’affichage d’une carte Google Maps, il peut être intéressant de placer dans l’infobulle du marqueur une iframe. Cela permet d’afficher une page web. Dans l’exemple, je vais afficher une streetview pour chacun des membres de ma famille. Le script Début du script et création de la carte : 1 2 3 4 <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=clé_api'></script> <script> function initCarte(){ </script> Définition des variables : // les variables (LatLng correspond à la position : latitude et longitude) var locations = [ ['marqueur3', 50.

Un marqueur sur Google Maps

Dans un article précédent, nous avons vu comment afficher une carte Google Maps. Nous allons voir ici comment placer et personnaliser un marqueur. Déclaration du script À placer de préférence dans le header de la page, en indiquant votre clé API GoogleMaps. <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=CLÉAPI'></script> Création de la carte Elle s’appelle ici carte_gite. J’indique le centrage, le zoom et le type de carte (ROADMAP, SATELLITE,TERRAIN ou HYBRID). Les options suivantes concernent l’icône de contrôle du zoom, le zoom avec la molette et le double clic.