Api Google Maps flèche Carte flèche Créer une carte pleine page ou avec marge par rapport au bord de la feuille.

CREATION D'UNE CARTE PLEINE PAGE OU
AVEC UNE MARGE PAR RAPPORT AU BORD DE PAGE

Article créé le : 14/02/2009
 

Présentation

Voici deux exemples de présentation vous permettant d'afficher :

  • une carte pleine page,
  • une carte pleine page dotée d'une marge.

Carte pleine page

Dans cet exemple, nous allons créer une carte couvrant la totalité de votre page grâce aux propriétés de CSS.


  html {

	overflow: hidden;

  }

  html, body {

	margin: 0;

	padding: 0;

	height: 100%;

  }

  #EmplacementDeMaCarte {

	width: 100%;

	height: 100%;

  }

Carte

Pour voir le résultat cliquez sur ce lien : Carte Google en plein écran

Code : Avec Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte.com - Créer une carte pleine page</title>
  • <!-- Chargement du script Google AJAX APIs en précisant votre clé -->
  • <script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_Votre_Clef_API_ Ici"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • /* Chargement du module "maps" dans sa version "2.x" */
  • google.load("maps", "2.x",{"other_params":"sensor=false"});
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (google.maps.BrowserIsCompatible()) {
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.341571, 0.514233), 13);
  • /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • /* Appelle la fonction "initialize" lorsque la page web sera chargée */
  • google.setOnLoadCallback(initialize);
  • //]]>
  • </script>
  • <style type="text/css">
  • <!--
  • html, body {
  • margin: 0;
  • padding: 0;
  • height: 100%;
  • }
  • #EmplacementDeMaCarte {
  • width: 100%;
  • height: 100%;
  • }
  • -->
  • </style>
  • </head>
  • <body>
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <div id="EmplacementDeMaCarte"></div>
  • </body>
  • </html>

Code : Sans Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte.com - Créer une carte pleine page</title>
  • <!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
  • <script src="http://maps.google.com/maps?file=api&v=2.x&key=Insérez_Votre_Clef_API_ Ici&sensor=false"
  • type="text/javascript"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (GBrowserIsCompatible()) {
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new GLatLng(47.341571, 0.514233), 13);
  • /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • //]]>
  • </script>
  • <style type="text/css">
  • <!--
  • html, body {
  • margin: 0;
  • padding: 0;
  • height: 100%;
  • }
  • #EmplacementDeMaCarte {
  • width: 100%;
  • height: 100%;
  • }
  • -->
  • </style>
  • </head>
  • <!-- Une fois la page chargée la fonction initialize() est exécutée. -->
  • <!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
  • <body onload="initialize()" onunload="GUnload()">
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <div id="EmplacementDeMaCarte"></div>
  • </body>
  • </html>

Carte pleine page avec marges

Par contre, si vous souhaitez introduire une marge entre votre carte et le bord de votre page, en plus des propriétés Css il faut ajouter un peu de code JavaScript.

Carte

Pour voir le résultat cliquez sur ce lien : Carte Google en plein écran avec marges

Code : Avec Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte.com - Créer une carte pleine page avec une marge</title>
  • <!-- Chargement du script Google AJAX APIs en précisant votre clé -->
  • <script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_Votre_Clef_API_ Ici"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • /* Chargement du module "maps" dans sa version "2.x" */
  • google.load("maps", "2.x",{"other_params":"sensor=false"});
  • /* Fonction initialize() */
  • function initialize() {
  • handleResize();
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (google.maps.BrowserIsCompatible()) {
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.341571, 0.514233), 13);
  • /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • function windowHeight() {
  • if (self.innerHeight) {
  • return self.innerHeight;
  • }
  • if (document.documentElement && document.documentElement.clientHeight) {
  • return document.documentElement.clientHeight;
  • }
  • if (document.body) {
  • return document.body.clientHeight;
  • }
  • return 0;
  • }
  • function handleResize() {
  • var height = windowHeight() - 25;
  • document.getElementById('EmplacementDeMaCarte').style.height = height + 'px';
  • }
  • /* Appelle la fonction "initialize" lorsque la page web sera chargée */
  • google.setOnLoadCallback(initialize);
  • window.onresize = handleResize;
  • //]]>
  • </script>
  • <style type="text/css">
  • <!--
  • html {
  • overflow: hidden;
  • }
  • html, body {
  • margin: 0;
  • padding: 0;
  • height: 100%;
  • }
  • body {
  • margin: 10px;
  • }
  • #contenu {
  • margin-top: 10px;
  • position: relative;
  • }
  • #EmplacementDeMaCarte {
  • position: absolute;
  • top: 0;
  • left: 0;
  • width: 100%;
  • height: 100%;
  • border: 1px solid #ccc;
  • }
  • -->
  • </style>
  • </head>
  • <body>
  • <div id="contenu">
  • <div id="EmplacementDeMaCarte"></div>
  • </div>
  • </body>
  • </html>

Code : Sans Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte.com - Créer une carte pleine page avec une marge</title>
  • <!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
  • <script src="http://maps.google.com/maps?file=api&v=2.x&key=Insérez_Votre_Clef_API_ Ici&sensor=false"
  • type="text/javascript"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • /* Fonction initialize() */
  • function initialize() {
  • handleResize();
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (GBrowserIsCompatible()) {
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new GLatLng(47.341571, 0.514233), 13);
  • /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • function windowHeight() {
  • if (self.innerHeight) {
  • return self.innerHeight;
  • }
  • if (document.documentElement && document.documentElement.clientHeight) {
  • return document.documentElement.clientHeight;
  • }
  • if (document.body) {
  • return document.body.clientHeight;
  • }
  • return 0;
  • }
  • function handleResize() {
  • var height = windowHeight() - 25;
  • document.getElementById('EmplacementDeMaCarte').style.height = height + 'px';
  • }
  • window.onresize = handleResize;
  • //]]>
  • </script>
  • <style type="text/css">
  • <!--
  • html {
  • overflow: hidden;
  • }
  • html, body {
  • margin: 0;
  • padding: 0;
  • height: 100%;
  • }
  • body {
  • margin: 10px;
  • }
  • #contenu {
  • margin-top: 10px;
  • position: relative;
  • }
  • #EmplacementDeMaCarte {
  • position: absolute;
  • top: 0;
  • left: 0;
  • width: 100%;
  • height: 100%;
  • border: 1px solid #ccc;
  • }
  • -->
  • </style>
  • </head>
  • <!-- Une fois la page chargée la fonction initialize() est exécutée. -->
  • <!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
  • <body onload="initialize()" onunload="GUnload()">
  • <div id="contenu">
  • <div id="EmplacementDeMaCarte"></div>
  • </div>
  • </body>
  • </html>