FAQ API Google MapsConsultez toutes les FAQ

Nombre d'auteurs : 4, nombre de questions : 31, dernière mise à jour : 8 février 2020 

 
OuvrirSommaireGoogle MapsLes cartes

Il faut au moins une trame HTML :

 
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>[GoogleMaps API V3] Insertion d'une Carte</title>
    <style>
      #div_carte {
        height : 600px; /* IMPERATIF */
        width : 600px;
        margin : auto;
        border : 1px solid #888;
      }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
    <h1>Titre de la carte</h1>
    <div id="div_carte"></div>
  </body>
</html>


Que retrouve-t-on dans ce fichier ?

  • En début de fichier on place un DOCTYPE, ici HTML5, afin d'informer le navigateur sur le mode de rendu souhaité.
  • Une balise META indiquant que nous sommes en mode plein écran et avec une carte non redimensionnable.
  • Une balise STYLE où l'on définit au minimum la hauteur du conteneur devant recevoir la carte, ceci est un impératif.
  • Une balise SCRIPT d'insertion du lien vers le code de l'API Google Maps.
  • Une balise BODY où l'on trouve :
    - un titre éloquent :O) ;
    - une DIV qui sera le conteneur dans lequel sera affichée notre carte. La DIV doit posséder un ID afin de pouvoir être référencée.

Maintenant écrivons la fonction permettant de créer la carte.
Pour créer une carte nous utilisons le constructeur google.maps.Map comme suit

 
Sélectionnez
function initCarte(){
  // création de la carte
  var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
    'center' : new google.maps.LatLng( 46.80, 1.70),
    'zoom' : 6
  });
}
// init lorsque la page est chargée
google.maps.event.addDomListener( window, 'load', initCarte);

Ne pas mettre de virgule après la dernière déclaration de propriété.


Explication du code :

1/ Nous créons un objet, ici oMap, de type google.maps.Map, en passant en paramètre :

  • l'objet dans lequel celle-ci sera affichée, ici la DIV ayant pour ID "div_carte" ;
  • les options retenues pour la carte, les options minimales (obligatoires) à initialiser étant :
    - center : position centrale de la carte au format google.maps.LatLng( valeur_latitude, valeur_longitude) ;
    - zoom : zoom initial d'affichage. Plus la valeur est petite, moins la carte présente de détails. À titre informatif, au niveau du 45° parallèle, une carte de 600px avec un zoom de 6 fait environ 1050 km de large.


2/ Nous appelons la méthode google.maps.event.addDomListener. Cette méthode mise à disposition par l'API Google Maps nous permet de lancer une fonction, ici initCarte, une fois la page chargée.
Cette façon de faire permet de placer d'autres actions sur l'événement load. Il est à noter que l'on pourrait se passer de cette ligne en mettant le code en fin de page avant fermeture de la balise BODY.

Il ne nous reste plus qu'à insérer ce code dans la partie HEAD entre des balises :

 
Sélectionnez
<script></script>

pour obtenir au final le fichier suivant :

 
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>[GoogleMaps API V3] Insertion d'une Carte</title>
    <style>
      #div_carte {
        height : 600px; /* IMPERATIF */
        width : 600px;
        margin : auto;
        border : 1px solid #888;
      }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initCarte(){
        // création de la carte
        var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
          'center' : new google.maps.LatLng( 46.80, 1.70),
          'zoom' : 6
        });
      }
      // init lorsque la page est chargée
      google.maps.event.addDomListener( window, 'load', initCarte);
    </script>
  </head>
  <body>
    <h1>Titre de la carte</h1>
    <div id="div_carte"></div>
  </body>
</html>
Mis à jour le 23 février 2015  par NoSmoking

Pour qu'une carte puisse s'afficher, il faut que son conteneur de destination ait une hauteur non nulle au moment de son initialisation.

Si le conteneur de la carte possède la propriété CSS display:none, il est considéré comme ayant une hauteur de 0px. Au moment de l'affichage de celui-ci, en passant son display à block, la carte ne sera pas ou incomplètement affichée.

Dans le cas où l'on ne veut afficher la carte qu'après une action utilisateur, validation sélection ou autre, nous pouvons avoir recours à deux méthodes pour afficher notre carte correctement.


Méthode #1 :
Nous encapsulons notre carte dans un conteneur parent et jouons sur les dimensions de celui ci.

 
Sélectionnez
<div id="cadre_carte">
  <div id="div_carte"></div>
</div>


Ici aussi il ne faut pas jouer avec la propriété display sur le conteneur parent. On utilisera le CSS suivant :

 
Sélectionnez
#cadre_carte {
  /* display : none;    /* A BANNIR dans ce cas */
  height : 0;
  overflow : hidden;
  position : relative;  /* pour IE jusqu'à au moins V7 */  
}
#div_carte{
  height : 600px;       /* IMPERATIF */
  width : 600px;
  margin : auto;  
}

La position:relative sur le conteneur parent permet à certaines versions de IE de réagir correctement.

Il ne reste plus qu'à afficher la carte en fixant une hauteur au conteneur parent :

 
Sélectionnez
document.getElementById('cadre_carte').style.height='600px';



Méthode #2 :
Nous forçons la carte à se redimensionner en utilisant la méthode trigger de l'objet google.maps.event en lui passant en paramètre la référence à la carte et resize comme nom d'événement.

En utilisant le CSS suivant :

 
Sélectionnez
#div_carte{
  display : none;       /* on masque donc l'élément */
  height : 600px;       /* IMPERATIF */
  width : 600px;
  margin : auto;  
}

Il ne reste plus qu'à afficher la carte en passant son display à block et en déclenchant le resize :

 
Sélectionnez
// récupération du conteneur de la carte
oMap.getDiv().style.display = 'block';
// déclenchement de l'événement resize de la carte
google.maps.event.trigger( oMap, 'resize');
// IMPORTANT ! recentrage de la carte la première fois
if( !oMap.get('firstShow')){
  oMap.setCenter( oCentre);
  oMap.set('firstShow', 1);
}


Nota bene : il est important de recentrer la carte lors du premier affichage. Pour les réaffichages, on gère ici un flag, firstShow, afin de ne pas avoir à recentrer celle-ci à chaque apparition. Ce qui permet de conserver les modifications faites par l'utilisateur.

Le même résultat peut être obtenu sans utilisation de flag de la façon suivante :

 
Sélectionnez
// récupération du conteneur de la carte
oMap.getDiv().style.display = 'block';
// déclenche l'événement resize de la carte
google.maps.event.trigger( oMap, 'resize');
// recentrage de la carte
oMap.setCenter( oMap.getCenter());
Mis à jour le 23 février 2015  par NoSmoking

Lien : Méthode #1 page exemple
Lien : Méthode #2 page exemple

Il existe au moins deux façons d'y parvenir.

Méthode #1 :
Supprimer la barre de contrôle du zoom. Dans ce cas il faut également désactiver le zoom via la molette de la souris et le double-clic :

 
Sélectionnez
// création de la carte
var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
    'center' : new google.maps.LatLng( 46.80, 1.70),
    'zoom' : 6,
    'zoomControl' : false,             // supprime l'icône de contrôle du zoom  
    'scrollwheel' : false,             // désactive le zoom avec la molette de la souris 
    'disableDoubleClickZoom' : true    // désactive le zoom sur le double-clic
  });



Méthode #2 :
Fixer le zoom mini et maxi dans les options de la map :

 
Sélectionnez
var DEFAULT_ZOOM = 6;                // valeur du zoom souhaité  
// création de la carte
var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
    'center' : new google.maps.LatLng( 46.80, 1.70),
    'zoom' : DEFAULT_ZOOM,
    'zoomControl' : false,             // supprime l'icône de contrôle du zoom  
    'minZoom' : DEFAULT_ZOOM,
    'maxZoom' : DEFAULT_ZOOM
  });


Nota bene : le fait de mettre un minZoom et un maxZoom n'empêche pas de fixer un zoom. Dans ce cas, il est également intéressant d'enlever l'affichage de la barre de contrôle du zoom, qui ne sert donc plus à rien.

Mis à jour le 23 février 2015  par NoSmoking

On peut affecter/modifier le zoom de la carte en affectant/modifiant la propriété zoom de celle-ci.

L'affectation/modification peut se faire de plusieurs manières :

- en affectant la valeur du zoom lors de l'initialisation de la carte, ce qui est obligatoire.

 
Sélectionnez
 // création de la carte
 var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
   'center' : new google.maps.LatLng( 46.80, 1.70),
   'zoom' : 16   // réglage du niveau de zoom de la carte sur 16
 });


- en utilisant la méthode setZoom() et en passant en paramètre la valeur du zoom.

 
Sélectionnez
 oMap.setZoom(16);   // réglage du niveau de zoom de la carte sur 16


- en utilisant la méthode setOptions() et en passant en paramètre un objet contenant les options à modifier sous sa forme littérale.

 
Sélectionnez
oMap.setOptions( {'zoom' : 16});  // réglage du niveau de zoom de la carte sur 16
Mis à jour le 23 février 2015  par NoSmoking

On peut affecter/modifier l'aspect de la carte en affectant/modifiant la propriété mapTypeId de celle-ci.

Les différents types (aspects) de carte disponibles sont :

  • google.maps.MapTypeId.ROADMAP, carte la plus courante avec le plan à plat des routes ;
  • google.maps.MapTypeId.SATELLITE, carte sur base d'images satellites ;
  • google.maps.MapTypeId.TERRAIN, carte des reliefs ;
  • google.maps.MapTypeId.HYBRID, carte satellite avec le plan des routes à plat.

L'affectation/modification peut se faire de plusieurs manières :

- en affectant le type de carte lors de l'initialisation de celle-ci.

 
Sélectionnez
 // création de la carte
 var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
   'center' : new google.maps.LatLng( 46.80, 1.70),
   'zoom' : 6,
   'mapTypeId' : google.maps.MapTypeId.ROADMAP
 });


- en utilisant la méthode setMapTypeId() et en passant en paramètre un des types de carte disponibles.

 
Sélectionnez
oMap.setMapTypeId( google.maps.MapTypeId.SATELLITE);


- en utilisant la méthode setOptions() et en passant en paramètre un objet contenant les options à modifier sous sa forme littérale.

 
Sélectionnez
oMap.setOptions( {'mapTypeId' : google.maps.MapTypeId.SATELLITE});
Créé le 2 janvier 2012  par NoSmoking

Pour centrer la carte sur un point particulier, l'objet google.maps.Map dispose de deux méthodes.

1) La méthode setCenter(latLng:LatLng|LatLngLiteral) qui attend en paramètre une position sous forme d'un objet google.maps.LatLng, ou d'un objet google.maps.LatLngLiteral, représentant le nouveau centre de la carte.
Le déplacement s'effectue sans effet de glissement.

 
Sélectionnez
var oLatLng = new google.maps.LatLng( 46.80, 1.70); // position du centre de la carte
// ou autre en utilisant un objet LatLngLiteral
var oLatLng = {'lat': 46.80, 'lng': 1.70};          // position du centre de la carte
oMap.setCenter( oLatLng); // centrage de la carte


2) La méthode panTo(latLng:LatLng|LatLngLiteral) qui attend en paramètre une position sous forme d'un objet google.maps.LatLng, ou d'un objet google.maps.LatLngLiteral, représentant le nouveau centre de la carte.

Si le déplacement est inférieur à la largeur et à la hauteur de la carte, celui-ci s'effectuera avec un effet de glissement.

 
Sélectionnez
var oLatLng = new google.maps.LatLng( 46.80, 1.70); // position du centre de la carte
// ou autre en utilisant un objet LatLngLiteral
var oLatLng = {'lat': 46.80, 'lng': 1.70};          // position du centre de la carte
oMap.panTo( oLatLng); // centrage de la carte
Mis à jour le 23 février 2015  par NoSmoking

Lien : Page exemple

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.